树型(Tree)
1.1 三层 Grid
<div id="weightTree"></div> <!--定义容器-->
new Tree({
tree: $('#weightTree'), // 容器id
data: startData.theme3, // 切换 startData.theme1, startData.theme2 试试
main: tree.main, // 需要缩进的列
width: tree.width, // 列宽度
alias: tree.alias, // 列类名
header: tree.header, // 头部
headersub: tree.headersub, // 副头部
collapse: tree.collapse, // 列表树
callback: function(self) { // 渲染后回调
toggleLevel(self);
changePrecent(self);
changeWeight(self);
}
});
// 语法与 jquery-ui的 tree-grid 有点类似,但是功能没那么强大
// 列内容格式说明
// title 匹配 json 字段的 key 名
// formatter 可带 html 格式内容
{
title: 'value',
formatter: function(val) {
return ' ';
}
}
// Data 格式
var startData = {
zid: '0001',
value: '都城的饭好难吃',
themeStyle: 2,
theme1: [{
zid: '00031',
value: '一级指标1111111111',
defined: 1,
grade1: 1,
grade2: 1,
grade3: 1,
children: []
}],
theme2: [{
zid: '00031',
value: '一级指标99999999',
defined: 1,
grade1: 1,
grade2: 1,
grade3: 1,
children: [{
zid: '00031',
value: '二级指标222222222',
defined: 1,
grade1: 1,
grade2: 1,
grade3: 1,
children: []
}]
}],
theme3: [{
zid: '00031',
value: '一级指标1',
defined: 1,
grade1: 1,
grade2: 1,
grade3: 1,
children: [{
zid: '000211',
value: '二级指标',
defined: 1,
grade1: 1,
grade2: 1,
grade3: 1,
children: [{
zid: '000211',
value: '三级指标',
defined: 1,
grade1: 999,
grade2: 999,
grade3: 999,
children: []
}]
}, {
zid: '000211',
value: '二级指标',
defined: 1,
grade1: 1,
grade2: 1,
grade3: 1,
children: [{
zid: '000211',
value: '三级指标',
defined: 1,
grade1: 1,
grade2: 1,
grade3: 1,
children: []
}, {
zid: '000211',
value: '三级指标',
defined: 1,
grade1: 1,
grade2: 1,
grade3: 1,
children: []
}, {
zid: '000211',
value: '三级指标',
defined: 1,
grade1: 1,
grade2: 1,
grade3: 1,
children: []
}]
}]
}, {
zid: '00031',
value: '一级指标2',
defined: 1,
grade1: 1,
grade2: 1,
grade3: 1,
children: [{
zid: '000211',
value: '二级指标',
defined: 1,
grade1: 1,
grade2: 1,
grade3: 1,
children: []
}, {
zid: '000211',
value: '二级指标',
defined: 1,
grade1: 1,
grade2: 1,
grade3: 1,
children: [{
zid: '000211',
value: '三级指标',
defined: 1,
grade1: 1,
grade2: 1,
grade3: 1,
children: []
}]
}]
}]
}
1.2 树结构
<div id="weightLoop"></div> <!--定义容器(支持无限级)-->
new Tree({
tree: $('#weightLoop'),
data: JSON.parse(loopdata),
dw: 20,
main: [true],
width: ['100%'],
alias: ['name'],
header: [], // 不显示头部
headersub: [], // 不显示副头部
collapse: [
{
title: 'title',
formatter: function (v) {
return '<em class="icon icon-folder"></em><a class="ellipsis block c-gray2 pdr10" href="javascript:void(0)" title="' + v.Name + '">' + v.Name + '</a><input type="hidden" orgid="' + v.OrgStructureDepartmentId + '" />'
}
}
],
callback: function (self) {}
});