标签：orm and apt https str width 必须 ext href
前言 ：最近的项目中需要实现树形表格功能，由于前端框架用的是bootstrap，但是bootstrapTable没有这个功能所以就找了一个前端的treegrid第三方组件进行了封装.现在把这个封装的组件贴出来 大家共同讨论进步。
1 效果图
2 组件下载地址
链接: https://pan.baidu.com/s/1R8jIGXimeJwUcL7WyqZjDA 密码: ud96
3 组件的使用
3.1 在页面中引入如下的文件
<link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" /> <link href="~/Content/jquery-treegrid-master/css/jquery.treegrid.css" rel="stylesheet" /> <script src="~/Scripts/jquery-1.10.2.min.js"></script> <script src="~/Content/bootstrap/js/bootstrap.min.js"></script> <script src="~/Content/jquery-treegrid-master/js/jquery.treegrid.min.js"></script> <script src="~/Content/jquery-treegrid-master/js/jquery.treegrid.bootstrap3.js"></script> <script src="~/Content/jquery-treegrid-master/extension/jquery.treegrid.extension.js"></script>
3.2 然后定义一个空的table标签
<table id="tb" ></table>
3.3 初始化 js
$(‘#tb‘).treegridData({ id: ‘shopId‘, parentColumn: ‘parentId‘, type: "POST", //请求数据的ajax类型 url: baseURL + "sys/shop/shopTreeList", //请求数据的ajax的url ajaxParams: {}, //请求数据的ajax的data属性 expandColumn: ‘shopId‘,//在哪一列上面显示展开按钮 striped: true, //是否各行渐变色 bordered: true, //是否显示边框 //expandAll: false, //是否全部展开 columns: [ {title: ‘商户名称‘,field:‘name‘,index:‘title‘, width:100,sortable:false}, {title: ‘省份‘,field:‘province‘,index:‘province‘, width:80,sortable:false},*/ {title: ‘城市‘,field:‘city‘,index:‘city‘, width:80,sortable:false}, {title: ‘地区‘,field:‘area‘,index:‘area‘, width:80,sortable:false}, {title: ‘操作‘,field:‘shopId‘,index:‘shopId‘,widt:30,formatter: function(row, index){ return "<a class=‘label label-success‘ onclick=‘query(\""+row.shopId+"\")‘>详情</a> " + "<a class=‘label label-success‘ onclick=‘updateShop(\""+row.shopId+"\")‘>修改</a>"; }} ] });
4 细节
4.1 该组件支持无限级树形结构；
4.2 节点数据必须有 id和父id 字段；
4.3 单元列 中formatter：function（row,index）的row 代表当前行的数据，index 代表当前行的索引；
5 相关函数
待续 .....
标签：orm and apt https str width 必须 ext href
原文地址：https://www.cnblogs.com/keepruning/p/9119282.html
