8月18日(周六)成都源创会火热报名中,四位一线行业大牛与你面对面,探讨区块链技术热潮下的冷思考。
Watch Star Fork

xknaan / B-JUIJavaScriptApache-2.0

加入码云
与超过 300 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
B-JUI(Best jQuery UI) 前端框架,轻松开发,专注您的业务,从B-JUI开始。
一键复制 编辑 原始数据 按行查看 历史
ztree-select.html 5.44 KB xknaan 提交于 2015-02-24 23:23 . [特别说明:本次更新涉及子页面结构调整,请谨慎更新]
<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>

评论 ( 0 )

你可以在登录后,发表评论