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的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
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选择全选样式及功能的实例
在之前的版本,默认复选框是要有值得,默认为"勾选"两个字,在表格里用来做选择不适合,很难改,还好layui升级后,可以支持不写name值,来适应表格中的选择操作. 1.layui版本号为 v1.0.9 rls版本(当前最新版本) <span style="white-space:pre;"> </span><div class="layui-form"> <table class="layui-
-
解决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复选框重新勾选的问题方法
在项目中发现layui数据表格勾选复选框checkbox的时候,转到新的一页勾选,上一次的勾选不会选中,即没有记忆功能.导致跟后台交互传递参数不全问题. 为了解决此问题,我们可以借助缓存,每勾选一个,保存到缓存变量数组中,取消勾选的时候,删除缓存的对应项. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <
-
解决Layui数据表格中checkbox位置不居中的方法
1.情景 使用方法渲染的方式生成数据表格,添加了checkbox,但发现checkbox位置不居中,如下图所示 2.解决办法 通过layui官方社区,找到如下代码,只需要添加如下样式即可解决 .layui-table-cell .layui-form-checkbox[lay-skin="primary"]{ top: 50%; transform: translateY(-50%); } 以上这篇解决Layui数据表格中checkbox位置不居中的方法就是小编分享给大家的全部内容了,
-
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初始化时选中对应选项的方法
这个问题需要后台返回的数据格式跟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不显示的解决方法
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默认选中,获取选中值,清空所有选中项的例子
废话不多说,直接上代码吧: 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的目录树tree的例子
废话不多说啦,我就直接上代码吧,需要的朋友可以过来参考下 layui.use([ 'tree' ], function() { $ = layui.jquery; form = layui.form; //获取节点数据 getTreeData(); }); function getTreeData() { $.ajax({ url : path+"/RoleController/getResourceTree.do", type : "post", dataType
-
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读取目录树的实现方法.分享给大家供大家参考,具体如下: 前一阵时间面试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动态构建目录树
在使用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仿写百度百科的目录树
一.首先来看一下需求(截图为百度百科"医保"词条): 1.点击右侧的目录树,左侧跳转到指定的锚点位置: 2.滚动鼠标,游标跟随一起滚动至响应链接位置 二.实现思路 1.针对第一个需求,只需要设置游标所在div和右侧列表div的position为fixed,根据浏览器窗口定位,然后给左侧文章各区块增加id,为右侧列表每一项增加对应的href属性指向响应的锚点即可: 2.针对第二个需求,定义鼠标的滚动事件mousewheel(在ff下事件为DOMMouseScroll),当时自己琢磨了半天
随机推荐
- 一个正则表达式的看法(?:)
- tomcat虚拟主机_动力节点Java学院整理
- IOS代码笔记之下拉菜单效果
- 完美解决IE不支持Data.parse()的问题
- 分享9个最好用的JavaScript开发工具和代码编辑器
- 通过过滤器(Filter)解决JSP的Post和Request中文乱码问题
- Ajax使用杂谈 也许也是乱弹
- 批处理 添加隐藏用户代码
- SqlServer参数化查询之where in和like实现详解
- SQL2005 ROW_NUMER实现分页的两种常用方式
- 仅用[]()+!等符号就足以实现几乎任意Javascript代码
- js文本中搜索关键词输入效果
- VBS教程:方法-MoveFile 方法
- Spring MVC 拦截器实现登录
- 利用Python3分析sitemap.xml并抓取导出全站链接详解
- 透过DNS日志了解服务器状态
- 基于jQuery替换table中的内容并显示进度条的代码
- 根据IP地址查交换机端口
- Vue.js通用应用框架-Nuxt.js的上手教程
- Python实现简单求解给定整数的质因数算法示例