jstree中的checkbox默认选中和隐藏示例代码

jstree复选框自定义显示隐藏和初始化默认选中

首先需要配置 Checkbox plugin

"plugins" : ['checkbox']

设置默认选中状态（checkbox 选中）

state: {checked: true}
$.jstree.defaults.checkbox.tie_selection

示例：

$('#demo_tree').jstree({
 "core" : {
  'data': [
   { "id" : "ajson1", "parent" : "#", "text" : "Simple root node", state: {checked: true}},
   { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
   { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
   { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
  ]
 },
 "plugins" : ['checkbox'],
 "checkbox" : {
  "tie_selection": false,
 }
});

jstree复选框自定义显示隐藏

jstree 本身不支持在节点中隐藏 checkbox，国外有个大佬给出一个利用 css 来隐藏的解决方案：

首先来一段 css

.no_checkbox>i.jstree-checkbox{display:none}

然后在 data 的 json 数据结构中

$('#demo_tree').jstree({
 "core" : {
  'data': [
   { "id" : "ajson1", "parent" : "#", "text" : "Simple root node", state: {checked: true}},
   { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
   { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" , a_attr: {class: "no_checkbox"}},
   { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
  ]
 },
 "plugins" : ['checkbox'],
});

效果：

jstree version => 3.3.8

参考：

https://stackoverflow.com/questions/6112567/jstree-hide-checkbox

总结

以上所述是小编给大家介绍的jstree中的checkbox默认选中和隐藏示例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • DevExpress实现TreeList按条件隐藏节点CheckBox的方法

    DevExpress实现TreeList按条件隐藏节点CheckBox的方法

    本文实例讲述了DevExpress实现TreeList按条件隐藏节点CheckBox的方法,在项目开发中有一定的使用价值.具体的实现方法如下: 主要功能代码如下: /// <summary> /// 隐藏CheckBox /// 说明 /// 在CustomDrawNodeCheckBox事件中使用 /// eg: /// TreeList _curTree = (TreeList)sender; /// _curTree.HideCheckBox(n => n.GetNodeType(

  • 用RadioButten或CheckBox实现div的显示与隐藏

    当选择"女"时,显示"美女.才女":当选择"男"时,隐藏 aspx 页面内容: 复制代码 代码如下: <head runat="server"> <title>用RadioButten(或CheckBox)实现div的显示与隐藏</title> <script type="text/javascript" language="javascript"

  • angularJs复选框checkbox选中进行ng-show显示隐藏的方法

    如下所示: ng-true-value="1" //代表选中的时候,值为1 ng-false-value="0" //代表未选中的时候,值为0 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="angular.min.js"></script

  • jQuery实现点击行选中或取消CheckBox的方法

    本文实例讲述了jQuery实现点击行选中或取消CheckBox的方法.分享给大家供大家参考,具体如下: /// <summary> /// 点击行选中或者取消CheckBox /// </summary> /// <param name="TableID">表ID</param> function SetCheckBox_Check(TableID) { var $TableID = TableID == "" ? &

  • ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox

    ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox

    由于某种原因,需要做一个控制grid列显示的checkboxgroup,虽然EXTJS4中的gridpanel自带列表可以来控制列的显示隐藏,但是有这样的需求(需要一目了然) 下面先上图 接着前几天做的工作,今天上午完成了定制字段,思路是在上面的普通查询或者高级查询结束以后,获得了列的fields,columns等信息,然后交给一个处理函数 makeCustomMadePanel,该函数用来生成checkboxgroup,生成的时候给它加上一个事件,原本以为checkbox会有类似于check的

  • jquery实现全选、反选、获得所有选中的checkbox

    jquery实现全选、反选、获得所有选中的checkbox

    举了7个不同的checkbox状态,和大家一一分享. 1.全选 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked","true"); }) 2.取消全选(全不选) $("#btn2").click(function(){ $("input[name='checkbox']").removeAttr

  • 浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)

    我这里往后端传递checkbox 多选框value的值是通过字符串方式传递,先调用js对选定checkbox遍历获取选的的boxvalue,然后写进隐藏域,最后作文对象的属性提交.见代码:` 前端: <form:form commandName="user" method="post"> <c:forEach items="${deploys}" var="deploy" varStatus="de

  • jstree中的checkbox默认选中和隐藏示例代码

    jstree复选框自定义显示隐藏和初始化默认选中 首先需要配置 Checkbox plugin "plugins" : ['checkbox'] 设置默认选中状态(checkbox 选中) state: {checked: true} $.jstree.defaults.checkbox.tie_selection 示例: $('#demo_tree').jstree({ "core" : { 'data': [ { "id" : "a

  • jQuery实现table中两列CheckBox只能选中一个的示例

    jQuery实现table中两列CheckBox只能选中一个的示例

    //html <table id="unit"> <tr> <th>选项一</th> <th>选项二</th> <th>姓名</th> </tr> <tr> <td><input type="checkbox" /></td> <td><input type="checkbox&quo

  • 改变checkbox默认选中状态及取值的实现代码

    <inputtype="checkbox"name="chk"value="1"val="1级">1级 <inputtype="checkbox"name="chk"value="2"checked="checked"val="2级">2级 <inputtype="checkbox&quo

  • layui checkbox默认选中,获取选中值,清空所有选中项的例子

    废话不多说,直接上代码吧: var arr = res.data; var myCheckbox = $("input[name='MenuArr']"); myCheckbox.prop('checked', false); //切换下拉选项时,清空所有选中状态 form.render('checkbox');//记得每次操作后要渲染该元素 for (var j = 0; j < arr.length; j++) { //数据库返回的需要选中项的值,我这里只返回了value,有

  • BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)

    废话不多说,直接给大家贴代码了,具体代码如下所示: $('#table').bootstrapTable('destroy'); $('#table').bootstrapTable({ url:'../data/kehulist.json', uniqueId: "id", striped:true, // pagination:true, clickToSelect:true, height:340, columns: [{ field : 'state', checkbox:tr

  • iOS中UITextField实现过滤选中状态拼音的代码

    2018年上班的第二天,就这样背了一个大锅.我们项目中有一个搜索功能,在这一期的版本中,为了增强优化,去除了过滤空格的请求,这样或许能增加很好的用户体验,恰恰相反,偷鸡不成蚀把米.没想到苹果系统的输入法竟然能自动联想,在没有选择汉字的时候,竟然能联想出来一大堆智能拼音,what???还有这种操作????输就输在了我几乎不使用苹果系统的输入法,我的手机设置一般都是把苹果的输入法删除了,直接使用搜狗.(苹果系统的输入法太难用了)不过对于测试人员来说,一定要测试各个系统的输入法,切记!切记!切记! 那

  • layui中使用jquery控制radio选中事件的示例代码

    勾选 form.on('radio(yesHave)', function (data) { $("input[name='hasPrepaidVoucher'][title='有']").attr('checked',true); form.render(); }); 取消勾选 form.on('radio(noIssuer)', function (data) { debugger; $("input[name='voucherIssuer']").remove

  • IDEA 中创建Spring Data Jpa 项目的示例代码

    一.IDEA 创建工程 使用IDEA 创建工程的过程,使用文字做简单描述. 选择工程类别[Spring Initializr]. 设置工程的元数据[Metadata],根据自己的情况填写即可. 设置工程的依赖:在[Web]中选择"Spring Web";在[SQL]中选中"Spring Data JPA"."Spring Data JDBC"."MySQL Driver"."JDBC API".选中的可能有

  • JavaScript中layim之整合右键菜单的示例代码

    JavaScript中layim之整合右键菜单的示例代码

    一. 效果演示 1.1.好友右键菜单: 1.2.分组右键菜单: 1.3.群组右键菜单: 二. 实现教程 接下来我们以好友右键菜单为例,实现步骤如下: 2.1.绑定好友右击事件: /* 绑定好友右击事件 */ $('body').on('mousedown', '.layim-list-friend li ul li', function(e){ // 过滤非右击事件 if(3 != e.which) { return; } // 不再派发事件 e.stopPropagation(); var o

  • vue中el-upload上传图片到七牛的示例代码

    vue中el-upload上传图片到七牛的示例代码

    一.思路,从后台获取七牛token,上传图片到七牛,获取返回图片路径放入el-upload. 二.代码. <el-input v-model="listVideoQuery.orgLogo" @change="orgLogoChange"></el-input> <el-col :span="10" class="mt10"> <el-upload class="upload

随机推荐