treeGrid插件

他是数据呈现的一个bootstrap中的插件(基于jQuery实现),页面加载完成,异步加载数据,以树结构table的形式呈现

1.业务实现:

  (1)引入treeGrid相关js文件

    jquery.treegrid.css

    jquery.treegrid.extension.js

    tree.table.js

    jquery.treegrid.min.js

  (2)定义方法异步加载数据

2.初始化表格

/**
 * 初始化表格的列
 */
var columns = [
{
    field : 'selectItem',/* //有一个选择 */
    radio : true/*     //单选 */
},
{
    title : '菜单ID',/* //标题 */
    field : 'id',/*     //这个值需要和返回的数据的字段一致 */
    visible : false,/*     //不可见,false为可见 */
    align : 'center',/*     //水平居中 */
    valign : 'middle',/*     //垂直居中 */
    width : '80px'/*         //    宽度 */
},
{
    title : '菜单名称',
    field : 'name',
    align : 'center',
    valign : 'middle',
    sortable : true,/* //排序 */
    width : '130px'
},
{
    title : '上级菜单',
    field : 'parentName',
    align : 'center',
    valign : 'middle',
    sortable : true,
    width : '100px'
},
{
    title : '类型',
    field : 'type',
    align : 'center',
    valign : 'middle',
    sortable : true,
    width : '70px',
    formatter : function(item, index) {
        if (item.type == 1) {
            return '<span class="label label-success">菜单</span>';
        }
        if (item.type == 2) {
            return '<span class="label label-warning">按钮</span>';
        }
    }
}, 
{
    title : '排序号',
    field : 'sort',
    align : 'center',
    valign : 'middle',
    sortable : true,
    width : '70px'
}, 
{
    title : '菜单URL',
    field : 'url',
    align : 'center',
    valign : 'middle',
    sortable : true,
    width : '160px'
}, 
{
    title : '授权标识',
    field : 'permission',
    align : 'center',
    valign : 'middle',
    sortable : true
}];

猜你喜欢

转载自www.cnblogs.com/gxlaqj/p/11457437.html