layui 数字步进器_QUICK UI 文档

树形表格

基本使用

步骤1：引入表格控件脚本

步骤2：构建表格容器

步骤3：JS代码创建树形表格

var g;

function initComplete(){

//usePager: false设置为不分页

g = $("#maingrid").quiGrid({

columns: [

{ display: '部门名', name: 'name', id:'deptId', width: 250, align: 'left' },

{ display: '部门id', name: 'id',width: 250, type: 'int', align: 'left' },

{ display: '部门parentId', name: 'parentId', width: 250, align: 'left' }

],

height: '100%', width:"100%",checkbox:true,usePager: false,url:'/getTreeGrid.action',tree: { columnId: 'deptId' }

});

}

使用Grid的tree属性来创建树形表格；

tree属性中指定columnId为某一列的id值，则树结构的展开收缩按钮就在该列。一般指定为第一列的id；

数据格式：

{"rows":[{"id":0,"parentId":-1,"name":"公司","children":[

{"id":1,"parentId":0,"name":"南京分公司","children":[

{"id":2,"parentId":1,"name":"市场部","children":[

{"id":3,"parentId":2,"name":"市场1组","children":null},

{"id":11,"parentId":2,"name":"市场2组","children":null},

{"id":12,"parentId":2,"name":"市场3组","children":null}

]},

{"id":13,"parentId":1,"name":"财务部","children":null},

{"id":14,"parentId":1,"name":"行政部","children":null},

{"id":15,"parentId":1,"name":"工程部","children":null},

{"id":16,"parentId":1,"name":"技术部","children":null},

{"id":17,"parentId":1,"name":"生产部","children":null}]

},

{"id":7,"parentId":0,"name":"杭州办事处","children":[

{"id":8,"parentId":7,"name":"接待处","children":null},

{"id":9,"parentId":7,"name":"洽谈处","children":null}

]}]}]}

说明：树形表格初始时默认全都展开的。如果希望初始时只显示第一级，点击再展开下一级。则传来的数据对应项增加：open:false，如果设置了false，则该项所有子节点数据也要增加open属性并设为false

个性设置树形表格

这里通过数据控制初始时全部收缩，自定义图标，并且参数控制点击checkbox不关联子节点。

var gridData={"rows":[

{"id":1,"parentId":0,"name":"南京分公司","iconClass":"icon_star","open":false,"children":[

{"id":2,"parentId":1,"name":"市场部","iconClass":"icon_list","open":false,"children":[

{"id":3,"parentId":2,"name":"市场1组","iconClass":"icon_mark","children":null},

{"id":11,"parentId":2,"name":"市场2组","iconClass":"icon_mark","children":null},

{"id":12,"parentId":2,"name":"市场3组","iconClass":"icon_mark","children":null}

]},

{"id":13,"parentId":1,"name":"财务部","iconClass":"icon_list","children":null},

{"id":14,"parentId":1,"name":"行政部","iconClass":"icon_list","children":null},

{"id":15,"parentId":1,"name":"工程部","iconClass":"icon_list","children":null},

{"id":16,"parentId":1,"name":"技术部","iconClass":"icon_list","children":null},

{"id":17,"parentId":1,"name":"生产部","iconClass":"icon_list","open":false,"children":[

{"id":18,"parentId":17,"name":"222","iconClass":"icon_mark","children":null}

]}

]},

{"id":7,"parentId":0,"name":"杭州办事处","iconClass":"icon_star","open":false,"children":[

{"id":8,"parentId":7,"name":"接待处","iconClass":"icon_list","children":null},

{"id":9,"parentId":7,"name":"洽谈处","iconClass":"icon_list","children":null}

]},

{"id":18,"parentId":0,"name":"郑州办事处","iconClass":"icon_star","open":false,"children":[

{"id":19,"parentId":18,"name":"接待处","iconClass":"icon_list","children":null},

{"id":20,"parentId":18,"name":"洽谈处","iconClass":"icon_list","children":null}

]},

{"id":21,"parentId":0,"name":"苏州办事处","iconClass":"icon_star","open":false,"children":[

{"id":22,"parentId":21,"name":"接待处","iconClass":"icon_list","children":null},

{"id":23,"parentId":21,"name":"洽谈处","iconClass":"icon_list","children":null}

]},

{"id":24,"parentId":0,"name":"北京办事处","iconClass":"icon_star","children":null}

]}

var g;

function initComplete(){

//usePager: false设置为不分页

g = $("#maingrid").quiGrid({

columns: [

{ display: '部门名', name: 'name', id:'deptId', width: 250, align: 'left' },

{ display: '部门id', name: 'id',width: 250, type: 'int', align: 'left' },

{ display: '部门parentId', name: 'parentId', width: 250, align: 'left' }

],

height: '100%', width:"100%",checkbox:true,usePager: false,data:gridData,autoCheckChildren:false,tree: { columnId: 'deptId' }

});

}

可以动态控制某个节点展开或收缩

function collapseRow2(){

for (var record in g.records){

if(g.records[record]['name']=="杭州办事处"){

g.collapse(g.records[record]);

}

}

}

function expandRow2(){

for (var record in g.records){

if(g.records[record]['name']=="杭州办事处"){

g.expand(g.records[record]);

}

}

}

异步加载

var gridData={"rows":[

{"value":1,"key":"南京分公司","isParent":true,"open":false},

{"value":7,"key":"杭州办事处","isParent":true,"open":false}

]}

var g;

function initComplete(){

g = $("#maingrid").quiGrid({

columns: [

{ display: '部门名', name: 'key', id:'deptId', width: 250, align: 'left'},

{ display: '部门id', name: 'value',width: 250, type: 'int', align: 'left' }

],

height: '100%', width:"100%",checkbox:true,usePager: false,data:gridData,autoCheckChildren:true,tree: { columnId: 'deptId' },treeAjax:true,

treeChildDataPath:"/organizationAction.do?method=getDepartments&parentid=",treeAutoParam:"value",treeDataFilter:filterHandler

});

}

//本例使用的是下拉框示例使用的数据，格式不符合要求，所以使用了treeDataFilter重新处理数据，正常是不用的

function filterHandler(childData){

var newData=[];

$.each(childData["list"],function(idx,item){

if(item.key=="市场部"){

item.isParent=true;

item.open=false;

}

if(item.key=="财务部"||item.key=="工程部"||item.key=="市场1组"){

item.checked=true;

}

newData.push(item);

});

return newData;

}

参数表

树形表格相关属性表

属性名

默认值

说明

treeExpandAll

false

控制点击加号一次性将所有子节点全展开还是一级级展开。默认一级级展开

autoCheckChildren

true

勾选checkbox时只选择当前一行还是将所有子节点行全部选中。默认将所有子节点行全部选中。

treeAjax

false

是否开启异步加载

treeChildDataPath

无

设置读取数据的url路径，异步加载时通过treeChildDataPath+ 该行treeAutoParam字段对应的值来拼出路径 读取数据

treeAutoParam

无

设置点击传递参数的字段名，异步加载时通过treeChildDataPath+ 该行treeAutoParam字段对应的值来拼出路径 读取数据

树形表格相关方法表：

方法名

参数

说明

appendRow

rowData 要附加的数据 targetRow 父节点 nearRow 插入的位置 rowid或者rowdata isBefore 是否在之前附加

附加新行

appendRange

rows要附加的数据 targetRow父节点 nearRow插入的位置 rowid或者rowdata isBefore是否在之前附加

一次性附加多行

collapse

rowindex或者rowdata

收缩

expand

rowindex或者rowdata

展开

toggle

rowindex或者rowdata

伸展/收缩节点

demotion

rowindex或者rowdata

降级

upgrade

rowindex或者rowdata

升级

getChildren

rowindex或者rowdata

获取子节点数据

getParent

rowindex或者rowdata

获取父节点数据

hasChildren

rowindex或者rowdata

是否包括子节点

isLeaf

rowindex或者rowdata

是否叶节点

getColumns

columnLevel

获取指定层级的Columns

树形表格相关事件表：

事件名

处理函数参数

说明

onCollapse

节点收缩时触发

onExtend

节点展开时触发

treeDataFilter

childData

异步加载时如果传递过来的数据不可控，无法符合grid的要求，可以使用treeDataFilter来进行过滤