Jqgried树形列表

**************************************Jqgrid树列表***************************************function initGrid_test() {//必要字段：id,name,level,parent,isLeaf,expandedvar topicjson={"response": [{"id": "1",  "name": "项目1","obj":{"score":"77"},"score": "88","pro": "10%","handle": "",percentage:10, level:0, parent:"", isLeaf:false, expanded:true },{"id": "1_1","name": "因子1","obj":{"score":"77"},"score": "88","pro": "20%","handle": "",percentage:20, level:1, parent:"1", isLeaf:false, expanded:true},{"id": "1_1_1","name": ">=1","obj":{"score":"77"},"score": "88","pro": "15%","handle": "",percentage:15, level:2, parent:"1_1", isLeaf:true, expanded:false},{"id": "1_1_2","name": ">=2","obj":{"score":"77"},"score": "88","pro": "90%","handle": "",percentage:90, level:2, parent:"1_1", isLeaf:true, expanded:false},{"id": "1_1_3","name": ">=3","obj":{"score":"77"},"score": "88","pro": "13%","handle": "",percentage:13, level:2, parent:"1_1", isLeaf:true, expanded:false},{"id": "1_2","name": "因子1","obj":{"score":"77"},"score": "88","pro": "43%","handle": "",percentage:43, level:1, parent:"1", isLeaf:false, expanded:true},{"id": "1_2_2","name": ">=8","obj":{"score":"77"},"score": "88","pro": "22%","handle": "",percentage:22, level:2, parent:"1_2", isLeaf:true, expanded:false},{"id": "2",  "name": "项目2","obj":{"score":"77"},"score": "88","pro": "44%","handle": "",percentage:44, level:0, parent:"", isLeaf:false, expanded:true },{"id": "3",  "name": "项目3","obj":{"score":"77"},"score": "88","pro": "66%","handle": "",percentage:66, level:0, parent:"", isLeaf:false, expanded:true },{"id": "4",  "name": "项目4","obj":{"score":"77"},"score": "88","pro": "99%","handle": "",percentage:99, level:0, parent:"", isLeaf:false, expanded:true }]}jqGrid = jQuery("#jqGrid_table");jqGrid.jqGrid({datastr: topicjson,// 数据源url:'....'datatype: "jsonstring",//jsonstring 或  jsonheight: "auto",loadui: "disable",colNames: ['id','项目名称', '分值', '权重','百分比','操作'],//jqGrid的列显示名字colModel : [ //jqGrid每一列的配置信息。包括名字，索引，宽度,对齐方式.....{name: 'id', key: true, hidden:true},{name : 'name',index : 'name',editable : false,width: 220,editoptions : {readonly : true,size : 10},align:"left"},{name : 'score', width: 220,index : 'filesize',editable : true,editoptions : {size : 10},align:"left"},{name : 'pro',index : 'date',width: 220,editable : true,editoptions : {size : 10},align:"left"},{name: 'percentage',width: 200,index: 'percentage',editable: true,editoptions: {size: 30},align: "center",formatter: function (cellvalue, options, rowObject) {if (typeof (cellvalue) == "undefined") {return "";}var html = '<div class="u-progress lg" title="' + cellvalue + '%">' +'<div class="bar" style="width:' + cellvalue + '%"></div>' +'</div>';return html;}},{name : 'handle',width: 220,index : 'handle',editable : true,editoptions : {size : 10},align:"left",formatter: formatContext}],treeGrid: true,treeGridModel: "adjacency",ExpandColumn: "name",//展开的列****autowidth: true,rowNum: 10000,ExpandColClick: true,jsonReader: {repeatitems: false,root: "response"},onSelectRow: function(id){}});
}//注意要点：
1,必要字段：id,name,level,parent,isLeaf,expanded
2,ExpandColumn：展开的列
3,层级必须分明
3,引入css,不然前面的图标展示不会显示<!-- jqgrid树列表所需要的css --><link rel="stylesheet" href="${staticWebUrl}/jquery-ui-1.11.0-beta.2.custom/jquery-ui.css?vr=2019426" />

Jqgried树形列表相关推荐

动态树形列表基本原理演示
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
MFC中CImageList（图形列表控件）、CTreeCtrl（树形列表控件）的简单用法
网上资料: CImageList控件:用来保存一组相同大小的图标或位图,它没有图形显示界面,主要用途是为其它控件提供图形列表.可以通过索引访问图标或位图. CImageList常用的函数有: 函数说 ...
layui树形菜单右键_layui树形菜单写的树形列表（treetable）
基于layui v2.2.5的 layui-tree写了一个treetable(树形列表) 效果 1.1 收起效果图 1.2 展开效果图 1.开发预备首先需要到layui官网https://www. ...
js table 生成序号_el-table树形表格表单验证，js树形列表生成序号
树形表格表单验证预览树形列表生成序号首先需要生成一个序号用来确定表单验证的目标row,通过广度优先遍历,以1,1.1,1.1.1的规则对树形列表生成确定唯一值的索引,因为列表自身可以做CURD,因 ...
bootstracp实现树形列表_Java实现一致性哈希算法，并搭建环境测试其负载均衡特性...
实现负载均衡是后端领域一个重要的话题,一致性哈希算法是实现服务器负载均衡的方法之一,你很可能已在一些远程服务框架中使用过它.下面我们尝试一下自己实现一致性哈希算法. 一. 简述一致性哈希算法这里不详 ...
java 树状子节点_java构建树形列表（带children属性）
/*** 树形表格工具类 * *@authoryanggb*/ public classTreeTableUtil {/*** 把列表转换为树结构 * *@paramoriginalList 原始li ...
java children_java构建树形列表（带children属性）
/*** 树形表格工具类 * *@authoryanggb*/ public classTreeTableUtil {/*** 把列表转换为树结构 * *@paramoriginalList 原始li ...
android二级菜单ui,Android UI 之实现多级树形列表TreeView示例
所谓TreeView就是在Windows中常见的多级列表树,在Android中系统只默认提供了ListView和ExpandableListView两种列表,最多只支持到二级列表的实现,所以如果想要实 ...
【8.0、9.0c】树形列表列标题不对齐的问题及解决方案
树形视图状态经常会碰到字体上下排列不整齐的问题,虽不是什么大问题,但对某些处女座的人来说,真的是如鲠在喉,今天我们就来解决这个问题: 首先呢,这个问题的起因,不是前端css的问题,也不是js的问题,而 ...

Jqgried树形列表

Jqgried树形列表相关推荐

最新文章

热门文章