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
}];

 

3.方法引用：

    $(function() {
        doLoadEditPage();
    })

    function doLoadEditPage(title) {
        var url = "menu/doGetMenuMessage.do";
        //1.構建treeTable對象
        var tableId = "menuTable";
        /* tableId:這個treeTable存放的位置 */
        /* url：數據來源 */
        /* 上面定義的數組，以什么樣的形式展示 */
        var treeTable = new TreeTable(tableId, url, columns);
        //2.初始化treeTable
        //設置可展開的列，默認為1
        treeTable.setExpandColumn(2);
        //初始化table對象（底層發起ajax異步請求訪問服務端）
        treeTable.init();
        //展開所有
        //treeTable.setExpandAll(false);
    }

 

 

3.刪除表格中的某一行，而不進行查詢數據庫再渲染數據

3.1直接移除這一行：

（1）用開發者工具找到這一行所在的 tbody 的class或者id

 

 （2）這個本來是單選框，所以可以如下操作：

function doDeleteRowElement(){
　　　　//獲取被選中的單選框對象
        var selected = $(".treegrid-tbody input[type='radio']:checked");
　　　　　//找到他的祖先元素<tr></tr>
        var tr = selected.parents("tr");
        console.log(tr);
　　　　　//移除這個tr
        tr.remove();
    }