html ztree选中状态,ztree-select.html

//选择事件

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);

return false;

}

样例实现说明

zTree选择[多选]：

nodes='[{"id":1, "pId":0, "name":"基本元素"},{"id":11, "pId":1, "name": "普通表格", "nurl":"table.html", "target":"navTab", "rel":"table"},{"id":12, "pId":1, "name": "固定表头表格", "nurl":"table-grid.html", "target":"navTab", "rel":"table-grid"},{"id":13, "pId":1, "name": "可编辑表格", "nurl":"table-edit.html", "target":"navTab", "rel":"table-edit"},{"id":14, "pId":1, "name": "演示表单", "nurl":"form.html", "target":"navTab", "rel":"form"},{"id":15, "pId":1, "name": "表单元素", "nurl":"form-input.html", "target":"navTab", "rel":"form-input"},{"id":16, "pId":1, "name": "验证表单", "nurl":"form-validate.html", "target":"navTab", "rel":"form-validate"},{"id":2, "pId":0, "name":"进阶实例"},{"id":21, "pId":2, "name": "弹出窗口", "nurl":"dialog.html", "target":"navTab", "rel":"dialog"},{"id":22, "pId":2, "name": "滑动面板", "nurl":"collapse.html", "target":"navTab", "rel":"collapse"},{"id":23, "pId":2, "name": "树型菜单", "nurl":"ztree.html", "target":"navTab", "rel":"ztree"}]'>

class="form-control j-selectzTree" data-tree="#j_select_tree1"zTree选择[单选]：

class="form-control j-selectzTree" data-tree="#j_select_tree2"

实例代码：

<table class="table table-condensed table-hover" width="100%">

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

<td align="right">zTree选择[多选]：</td>

<td>

<ul id="j_select_tree1" class="ztree hide" attrs = '{"expandAll":true, "checkEnable":true, "onClick":"S_NodeClick", "onCheck":"S_NodeCheck"}'

</td>

<td>class="form-control j-selectzTree" data-tree="#j_select_tree1"</td>

</tr>

<tr>

<td align="right">zTree选择[单选]：</td>

<td>

<ul id="j_select_tree2" class="ztree hide" attrs = '{"expandAll":true, "checkEnable":true, "chkStyle":"radio", "radioType":"all", "onClick":"S_NodeClick", "onCheck":"S_NodeCheck"}'

</td>

<td>class="form-control j-selectzTree" data-tree="#j_select_tree2"</td>

</tr>

</tbody>

</table>

关闭

一键复制

编辑

Web IDE

原始数据

按行查看

历史

html ztree选中状态,ztree-select.html相关推荐

动态渲染select下拉框选中状态
动态渲染select下拉框选中状态 <div><select name="selectBox" id="" class="selec ...
html 选中状态,html默认选中状态
html中标签用法解析及如何设置selec标签定义和用法 select 元素可创建单选或多选菜单.当提交表单时,浏览器会提交选定的项目,或者收集用逗号分隔的多个选项,将其合成一个单独的参数列表,并且在 ...
改变select组件的option选中状态的快捷方法
以前我都是在<option>标签处通过判断value是否与其中一个相同然后输出selected="selected"来处理的,今天发现可以直接能过Js改变<sel ...
关于“前台根据后台值，操作字段、显示或select选中状态”的几种做法
需求分析当修改单选按钮或者下拉框的值的时候,如何根据后端获取的数据显示在前端,且要显示单选框和下拉框的选中状态第一种做法:使用JSTL标准标签库 ①下拉框显示 <select name=&q ...
Ztree选中节点获取
var zTreeOjb = $.fn.zTree.getZTreeObj("zTreeId"); //ztree的Id zTreeId获取复选框/单选框选中的节点: var ch ...
如何将zTree选中节点传递给后台
获取zTree选中节点 1 <body> 2 3 <script type="text/javascript"> 4 var setting = { 5 v ...
下拉框选中状态html,js中select下拉框选中
怎么用js动态设置select中的某个值为选中值 select 中的某个options为新建,但在子页面新建一个选项时怎么能提交新用JS动态设置select的方法如下: 手动通过原生JS来实现: / ...
4-10 :selected选中状态选择器
:selected选中状态选择器与:checked选择器相比,:selected选择器只能获取<select>下拉列表框中全部处于选中状态的<option>选项元素. 例如, ...
html select 选中触发,实现select中指定option选中触发事件
我们在用到下拉列表框select时,需要对选中的选项触发事件,其实本身没有触发事件方法,我们只有在select里的onchange方法里触发. 当我们触发select的双击事件时,用ondblcli ...
6.easyui+ztree案例：zTree树
做的就是西部区域面板中的树形导航图. Easyui中也有树,但是这个树不够强大. zTree性能非常好,功能强大. 介绍: l 什么是zTree呢? zTree是一个依靠jQuery实现的多功能&q ...

html ztree选中状态,ztree-select.html

html ztree选中状态,ztree-select.html相关推荐

最新文章

热门文章