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默认选中和隐藏示例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
相关推荐
-
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
由于某种原因,需要做一个控制grid列显示的checkboxgroup,虽然EXTJS4中的gridpanel自带列表可以来控制列的显示隐藏,但是有这样的需求(需要一目了然) 下面先上图 接着前几天做的工作,今天上午完成了定制字段,思路是在上面的普通查询或者高级查询结束以后,获得了列的fields,columns等信息,然后交给一个处理函数 makeCustomMadePanel,该函数用来生成checkboxgroup,生成的时候给它加上一个事件,原本以为checkbox会有类似于check的
-
jQuery实现点击行选中或取消CheckBox的方法
本文实例讲述了jQuery实现点击行选中或取消CheckBox的方法.分享给大家供大家参考,具体如下: /// <summary> /// 点击行选中或者取消CheckBox /// </summary> /// <param name="TableID">表ID</param> function SetCheckBox_Check(TableID) { var $TableID = TableID == "" ? &
-
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
我这里往后端传递checkbox 多选框value的值是通过字符串方式传递,先调用js对选定checkbox遍历获取选的的boxvalue,然后写进隐藏域,最后作文对象的属性提交.见代码:` 前端: <form:form commandName="user" method="post"> <c:forEach items="${deploys}" var="deploy" varStatus="de
-
DevExpress实现TreeList按条件隐藏节点CheckBox的方法
本文实例讲述了DevExpress实现TreeList按条件隐藏节点CheckBox的方法,在项目开发中有一定的使用价值.具体的实现方法如下: 主要功能代码如下: /// <summary> /// 隐藏CheckBox /// 说明 /// 在CustomDrawNodeCheckBox事件中使用 /// eg: /// TreeList _curTree = (TreeList)sender; /// _curTree.HideCheckBox(n => n.GetNodeType(
-
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
举了7个不同的checkbox状态,和大家一一分享. 1.全选 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked","true"); }) 2.取消全选(全不选) $("#btn2").click(function(){ $("input[name='checkbox']").removeAttr
-
用RadioButten或CheckBox实现div的显示与隐藏
当选择"女"时,显示"美女.才女":当选择"男"时,隐藏 aspx 页面内容: 复制代码 代码如下: <head runat="server"> <title>用RadioButten(或CheckBox)实现div的显示与隐藏</title> <script type="text/javascript" language="javascript"
-
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只能选中一个的示例
//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之整合右键菜单的示例代码
一. 效果演示 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上传图片到七牛的示例代码
一.思路,从后台获取七牛token,上传图片到七牛,获取返回图片路径放入el-upload. 二.代码. <el-input v-model="listVideoQuery.orgLogo" @change="orgLogoChange"></el-input> <el-col :span="10" class="mt10"> <el-upload class="upload
随机推荐
- 实例详解angularjs和ajax的结合使用
- DWR Ext 加载数据
- Java IO流对象的序列化和反序列化实例详解
- 使用Python编写简单的画图板程序的示例教程
- js实现仿爱微网两级导航菜单效果代码
- php ob_flush,flush在ie中缓冲无效的解决方法
- php遍历目录与文件夹的多种方法详解
- ASP编程入门进阶(一):安装配置服务器
- java实现动态上传多个文件并解决文件重名问题
- mysql查询字符串替换语句小结(数据库字符串替换)
- Asp Conn.execute的参数与返回值总结
- jquery实现一个简单好用的弹出框
- jQuery对Select的操作大集合(收藏)
- C++ Qt属性系统详细介绍
- Rsync实现文件定时同步技巧
- JAVA如何获取客户端IP地址和MAC地址
- jq实现酷炫的鼠标经过图片翻滚效果
- php预定义变量使用帮助(带实例)
- 利用C语言实现“百马百担”问题方法示例
- 浅谈Java内存模型之happens-before