layui实现checkbox的目录树tree的例子

废话不多说啦，我就直接上代码吧，需要的朋友可以过来参考下

layui.use([ 'tree' ], function() {
$ = layui.jquery;
form = layui.form;
//获取节点数据
getTreeData();
});

function getTreeData()
{
$.ajax({
url : path+"/RoleController/getResourceTree.do",
type : "post",
dataType : "json",
data :{
"roleId":roleId,
"id":null,
"t":Math.random()
} ,
error : function() {
},
success : function(data) {
treeData = JSON.stringify(data);
initMenuTree();
}
});
}

// 加载列表
function initMenuTree() {
//json数姐转换成对象
treeData = eval( "(" + treeData + ")" );
//console.log(treeData);
// 执行渲染
treeIns = layui.tree({
elem: '#demo', //指定元素，生成的树放到哪个元素上
check: 'checkbox', //勾选风格
skin: 'as', //设定皮肤
drag: true,//点击每一项时是否生成提示信息
checkboxName: 'aa[]',//复选框的name属性值
checkboxStyle: "",//设置复选框的样式，必须为字符串，css样式怎么写就怎么写
click: function(item) { //点击节点回调
 //alert(item);
},
change: function (item){//当当前input发生变化后所执行的回调
//console.log(item);
resourceIds=item;
},
data: {//为元素添加额外数据，即在元素上添加data-xxx="yyy"，可选
      hasChild: true
    },
nodes:treeData
});
return treeIns;
}

以上这篇layui实现checkbox的目录树tree的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • layui之table checkbox初始化时选中对应选项的方法

    这个问题需要后台返回的数据格式跟layui中的示例中返回数据格式一模一样 下面是数据格式参考,第一个LAY_CHECKED:true是让checkbox选中的最重要的参数 LAY_CHECKED:true city:"浙江杭州" email:"xianxin@layui.com" experience:"12" id:"10002" ip:"192.168.0.8" joinTime:"2016-

  • 解决layui checkbox 提交多个值的问题

    吐槽一下,layui的checkbox简直就是一个坑...(不能提交数组) 数据是从后台来的 <div class="layui-form-item" > <label class="layui-form-label">品种</label> <div class="layui-input-inline"> {foreach $quotation_type as $key=>$val} <

  • 解决Layui数据表格中checkbox位置不居中的方法

    1.情景 使用方法渲染的方式生成数据表格,添加了checkbox,但发现checkbox位置不居中,如下图所示 2.解决办法 通过layui官方社区,找到如下代码,只需要添加如下样式即可解决 .layui-table-cell .layui-form-checkbox[lay-skin="primary"]{ top: 50%; transform: translateY(-50%); } 以上这篇解决Layui数据表格中checkbox位置不居中的方法就是小编分享给大家的全部内容了,

  • 解决Layui选择全部,换页checkbox复选框重新勾选的问题方法

    在项目中发现layui数据表格勾选复选框checkbox的时候,转到新的一页勾选,上一次的勾选不会选中,即没有记忆功能.导致跟后台交互传递参数不全问题. 为了解决此问题,我们可以借助缓存,每勾选一个,保存到缓存变量数组中,取消勾选的时候,删除缓存的对应项. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <

  • Layui Table js 模拟选中checkbox的例子

    思路,根据 data-index 找到 点击到的tr,获取tr下的 div,js 模拟点击 function iniTable() { layui.use('table', function(){ var table = layui.table; //展示已知数据 table.render({ elem: tableid ,cols: [[ //标题栏 {type:'checkbox',id:'goodsLimitSeqNo'} , {field: 'goodsLimitSeqNo', titl

  • layui的table单击行勾选checkbox功能方法

    如下所示: //单击行勾选checkbox事件 $(document).on("click",".layui-table-body table.layui-table tbody tr", function () { var index = $(this).attr('data-index'); var tableBox = $(this).parents('.layui-table-box'); //存在固定列 if (tableBox.find(".l

  • 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,有

  • layui表格checkbox选择全选样式及功能的实例

    在之前的版本,默认复选框是要有值得,默认为"勾选"两个字,在表格里用来做选择不适合,很难改,还好layui升级后,可以支持不写name值,来适应表格中的选择操作. 1.layui版本号为 v1.0.9 rls版本(当前最新版本) <span style="white-space:pre;"> </span><div class="layui-form"> <table class="layui-

  • LayUI动态设置checkbox不显示的解决方法

    1.页面引入layui.js和layui.css <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>手机银行权限配置</title> <link type="text/css" rel="stylesheet" href="common/layui/css/layui.css" r

  • layui实现checkbox的目录树tree的例子

    废话不多说啦,我就直接上代码吧,需要的朋友可以过来参考下 layui.use([ 'tree' ], function() { $ = layui.jquery; form = layui.form; //获取节点数据 getTreeData(); }); function getTreeData() { $.ajax({ url : path+"/RoleController/getResourceTree.do", type : "post", dataType

  • dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法

    dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法

    在以前的一个公司内部管理系统(InnerOA)中,对于目录树的构造我采用的是dTree,实现无限级目录显示及右键菜单功能(右键菜单中包括:新建.修改.共享.删除.刷新等功能,如下图所示) 关于公司内部管理系统(InnerOA)中目录树的一些知识以后有时间将整理并提供源码. 但是dTree唯一遗憾的是不支持拖拽排序功能,这让我在完成InnerOA之后心里一直纠结的问题.在网上查看关于目录树的一些内容,dTree是我目前认为最符合我项目的一个.在一个偶然机会,发现了另一个强大的目录树,也就是本文所说

  • 使用ASP实现网站的“目录树”管理的代码

    使用ASP实现网站的目录树 数据库结构(共使用了两个表)1.tblCategory字段名  类型   Root   binary   说明树关或开(目录的根)ID     自动编号 关键字Sort   integer  识别该字段内容的整数(如果root是开状态sort为0)表示显示的目录的顺序Name   text(255)可以包含html中的标识符HREF   text(255) 允许空 2.tblPagesID   自动编号 Sort  integer 关键字Name  text(255)

  • 深入linux下遍历目录树的方法总结分析

    前几天需要实现对整个目录树的遍历,查阅了相关的一些资料.开始找到的原始的方法是使用readdir()与lstat()函数实现递归遍历,后来发现linux对于目录遍历这种最常用的操作已经提供了很完善的接口:ftw()与nftw().下面就这两种方法具体说明一下.1.手动实现递归1.1 stat()函数族stat函数族包括:stat,fstat以及lstat函数,都是向用户返回文件的属性信息(元数据). 复制代码 代码如下: view plaincopy to clipboardprint?#inc

  • jQuery zTree插件快速实现目录树

    ztree是JQuery的一个开源树形目录的插件,用来快速构建网站的树形目录结构,并且提供了功能丰富,利于扩展的API. JQuery ztree官网 只要引入jquery和ztree的库js,然后给ztree提供需要的json数据,并且设置好ztress的属性,就可以即刻展示出树形目录. 总结下来,要使用ztree的话,必须要完成以下几步: 1. 引入库文件 jquery.js ztree.js ztree.css 2. 获取数据 你要思考数据来源问题了. 如果要自己从数据库查询树形结构这时候

  • PHP读取目录树的实现方法分析

    PHP读取目录树的实现方法分析

    本文实例讲述了PHP读取目录树的实现方法.分享给大家供大家参考,具体如下: 前一阵时间面试XX公司笔试题中竟然有这样一道题: 使用PHP列出目录树! 当时一看就懵逼了!基本的思路还是有的,不过是使用递归算法,但对PHP操作目录文件的方法却不是很了解,所以今天好好补习一下! 解题思路: 1. 列出目录中的文件. 2. 判断是否是目录,如果是目录就继续递归. 3. 将所有文件名,存入多维数组 <?php function recurDir($pathName) { //将结果保存在result变量中

  • 在Mac下使用python实现简单的目录树展示方法

    在Linux或者Windows下想要查看目录树都可以通过tree命令来实现,两个操作系统中的操作也很相似.使用Linux时,最初以为这是shell中都有这个命令可用.结果使用Mac的时候发现并没有这个命令. 为了实现类似的功能,使用python做了一个简单的小脚本.实现不了漂亮的目录树,但是可以实现文件以及所在目录的列表打印. 编写代码如下: #!/usr/bin/python import os pwd = os.getcwd() for root,dirs,files in os.walk(

  • 使用JS动态构建目录树

    使用JS动态构建目录树

    在使用frameset布局的时候,经常会用到目录树,我们可以把一棵树写死,但是更多的情况是,这棵树需要随时被改动,所以我们期望的是他能够被动态的构建. MVC,算是了解一点,那本文就把这棵树根据M-V-C给拆开分解吧. 下面就来看看这棵树是怎么构建的. Module [数据层] var tree = { "id": 0, "a1": { "id": 1, "name": "a1", "childr

  • Python3遍历目录树实现方法

    本文实例讲述了Python3遍历目录树的方法.分享给大家供大家参考.具体实现方法如下: import os, fnmatch # 检查一个目录,后者某个包含子目录的目录树,并根据某种模式迭代所有文件 # patterns如:*.html,若大小写敏感可写*.[Hh][Tt][Mm][Ll] # single_level 为True表示只检查第一层 # yield_folders 表示是否显示子目录,为False只遍历子目录中的文件, # 但不返回字母名 def all_files(root, p

  • jQuery仿写百度百科的目录树

    jQuery仿写百度百科的目录树

    一.首先来看一下需求(截图为百度百科"医保"词条): 1.点击右侧的目录树,左侧跳转到指定的锚点位置: 2.滚动鼠标,游标跟随一起滚动至响应链接位置 二.实现思路 1.针对第一个需求,只需要设置游标所在div和右侧列表div的position为fixed,根据浏览器窗口定位,然后给左侧文章各区块增加id,为右侧列表每一项增加对应的href属性指向响应的锚点即可: 2.针对第二个需求,定义鼠标的滚动事件mousewheel(在ff下事件为DOMMouseScroll),当时自己琢磨了半天

随机推荐