treeGrid plug

He is a bootstrap data presented in the plug-in (based on jQuery to achieve), the page loads, asynchronous load data, presented in the form of a tree structure table

 

1. business to achieve:

　　(1) js files related to the introduction of treeGrid

　　　　jquery.treegrid.css

　　　　jquery.treegrid.extension.js

　　　　tree.table.js

　　　　jquery.treegrid.min.js

　　(2) The method defined in asynchronous load data

 

2. Initialize the table

/ * * 
 * Column of the table initialization 
 * / 
var Columns = [ 
{ 
    Field: ' selectItem ' , / * // there is a choice * / 
    Radio: to true / *      // radio * / 
}, 
{ 
    title: ' menu ID ' , / * // title * / 
    field: ' ID ' , / *      // this value is needed and returns data field matches * / 
    visible: to false , / *      // invisible, visible to false * / 
    align = left: 'Center ' , / *      // horizontal center * / 
    valign: ' Middle ' , / *      // vertical center * / 
    width: ' 80px ' / *          // width * / 
}, 
{ 
    title: ' menu name ' , 
    Field: ' name ' , 
    align = left: ' Center ' , 
    valign: ' Middle ' , 
    the sortable: to true , / * // Sort* / 
    Width: ' 130px ' 
}, 
{ 
    title: ' previous menu ' , 
    Field: ' parentName ' , 
    align = left: ' Center ' , 
    valign: ' Middle ' , 
    the sortable: to true , 
    width: ' 100px ' 
}, 
{ 
    title: ' type ' , 
    Field: ' type ' , 
    align = left: '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
}];