<script type="text/javascript">
//选择事件
function S_NodeCheck(e, treeId, treeNode) {
    var zTree = $.fn.zTree.getZTreeObj(treeId),
        nodes = zTree.getCheckedNodes(true)
    var ids = '', names = ''
    
    for (var i = 0; i < nodes.length; i++) {
        ids   += ','+ nodes[i].id
        names += ','+ nodes[i].name
    }
    if (ids.length > 0) {
        ids = ids.substr(1), names = names.substr(1)
    }
    
    var $from = $('#'+ treeId).data('fromObj')
    
    if ($from && $from.length) $from.val(names)
}
//单击事件
function S_NodeClick(event, treeId, treeNode) {
    var zTree = $.fn.zTree.getZTreeObj(treeId)
    
    zTree.checkNode(treeNode, !treeNode.checked, true, true)
    
    event.preventDefault()
}
</script>
<div class="bjui-pageContent">
    <div style="margin:15px auto 0; width:800px;">
        <fieldset>
            <legend>文本框</legend>
            <table class="table table-condensed table-hover">
                <thead>
                    <tr>
                        <th></th>
                        <th>样例</th>
                        <th>属性</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td align="right">zTree选择[多选]：</td>
                        <td>
                            <input type="text" name="menus" id="j_ztree_menus1" data-toggle="selectztree" size="18" data-tree="#j_select_tree1" readonly>
                            <ul id="j_select_tree1" class="ztree hide" data-toggle="ztree" data-expand-all="true" data-check-enable="true" data-on-check="S_NodeCheck" data-on-click="S_NodeClick">
                                <li data-id="1" data-pid="0">表单元素</li>
                                <li data-id="10" data-pid="1" data-url="form-button.html" data-tabid="form-button">按钮</li>
                                <li data-id="11" data-pid="1" data-url="form-input.html" data-tabid="form-input">文本框</li>
                                <li data-id="12" data-pid="1" data-url="form-select.html" data-tabid="form-select">下拉选择框</li>
                                <li data-id="13" data-pid="1" data-url="form-checkbox.html" data-tabid="table">复选、单选框</li>
                                <li data-id="14" data-pid="1" data-url="form.html" data-tabid="form">表单综合演示</li>
                                <li data-id="2" data-pid="0">表格</li>
                                <li data-id="20" data-pid="2" data-url="table.html" data-tabid="table">普通表格</li>
                                <li data-id="21" data-pid="2" data-url="table-fixed.html" data-tabid="table-fixed">固定表头表格</li>
                                <li data-id="22" data-pid="2" data-url="table-edit.html" data-tabid="table-edit">可编辑表格</li>
                            </ul>
                        </td>
                        <td>data-toggle="selectztree" data-tree="#j_select_tree1"</td>
                    </tr>
                    <tr>
                        <td align="right">zTree选择[单选]：</td>
                        <td>
                            <input type="text" name="menus" id="j_ztree_menus2" data-toggle="selectztree" size="18" data-tree="#j_select_tree2" readonly>
                            <ul id="j_select_tree2" class="ztree hide" data-toggle="ztree" data-expand-all="true" data-check-enable="true" data-chk-style="radio" data-radio-type="all" data-on-check="S_NodeCheck" data-on-click="S_NodeClick">
                                <li data-id="1" data-pid="0">表单元素</li>
                                <li data-id="10" data-pid="1" data-url="form-button.html" data-tabid="form-button">按钮</li>
                                <li data-id="11" data-pid="1" data-url="form-input.html" data-tabid="form-input">文本框</li>
                                <li data-id="12" data-pid="1" data-url="form-select.html" data-tabid="form-select">下拉选择框</li>
                                <li data-id="13" data-pid="1" data-url="form-checkbox.html" data-tabid="table">复选、单选框</li>
                                <li data-id="14" data-pid="1" data-url="form.html" data-tabid="form">表单综合演示</li>
                                <li data-id="2" data-pid="0">表格</li>
                                <li data-id="20" data-pid="2" data-url="table.html" data-tabid="table">普通表格</li>
                                <li data-id="21" data-pid="2" data-url="table-fixed.html" data-tabid="table-fixed">固定表头表格</li>
                                <li data-id="22" data-pid="2" data-url="table-edit.html" data-tabid="table-edit">可编辑表格</li>
                            </ul>
                        </td>
                        <td>data-toggle="selectztree" data-tree="#j_select_tree2"</td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            <div class="alert alert-warning form-inline"><i class="fa fa-warning"></i> <strong>data-tree 属性说明：</strong>对应一个隐藏的zTree选择器。</div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </fieldset>
    </div>
</div>
<div class="bjui-pageFooter">
    <ul>
        <li><button type="button" class="btn-close" data-icon="close">关闭</button></li>
    </ul>
</div>