Ace Admin 學習筆記

不知為何就叫呵呵發表於2017-04-01
筆記

1. jqGrid  提交編輯資料，控制檯報：Synchronous XMLHttpRequest on the main thread...

　　jqGrid的選項設定async: true選項：

ajaxRowOptions: { async: true }

 2. 重置 jqGrid 表格：

$("#grid-table").jqGrid('clearGridData');
$("#grid-table").jqGrid('setGridParam', { // 重新載入資料
     datatype : 'local',
     data : JSON.parse(data)//  newdata 是符合格式要求的需要重新載入的資料 
}).trigger("reloadGrid");

 3.搜尋 jqGrid 表格：

<input type="text" id="search" placeholder="搜尋...">
$('body').on('propertychange keyup','#search',function(){
            var condition = $('#search').val();
            var json = search(tdata ,condition);
            console.log(json);
            console.log(JSON.stringify(json));
            $("#grid-table").jqGrid('clearGridData');
            $("#grid-table").jqGrid('setGridParam', { // 重新載入資料
                datatype : 'local',
                data : json
            //  newdata 是符合格式要求的需要重新載入的資料 
            }).trigger("reloadGrid");
        })
        function search(source ,condition){
            var json=[];
            var index = 0;
            if(source == '' || condition == ''){
                return source;
            }
            try{
                //var data = JSON.parse(source);
                $.each(source, function(key,val) {
                    $.each(val, function(k,v) {
                        v += ''; ////防止數字
　　　　　　if(v && v.indexOf(condition) > -1){
                            json[index] =source[key];
                            index++;
                            return false; //break; return true-->continue
                        }
                    });
                });
            }catch(e){
                console.error(e);
            }
            return json;
        }

 4.

下面可以獲取選擇一行的id，如果你選擇多行，那下面的id是最後選擇的行的id：

var id=$(‘#gridTable’).jqGrid(‘getGridParam’,'selrow’);

如果想要獲取選擇多行的id，那這些id便封裝成一個id陣列，那可以使用以下：

var ids=$(‘#gridTable’).jqGrid(‘getGridParam’,'selarrrow’);

如果想獲取選擇的行的資料，只要傳入rowId即可，如下：

var rowData = $(“#gridTable”).jqGrid(‘getRowData’,rowId);

如果是透過data或者datastr配置的本地資料，獲取所有資料：

$('#gridid').jqGrid('getGridParam','data')   |  $('#gridid').jqGrid('getGridParam','datastr')

 

5.jqgrid 行內操作時，傳送的資料 (編輯時：editData)：

name: 'myac',
formatter: 'actions',
formatoptions: {
     keys: true,
     delOptions: {
           url:"${base}/permission/role/delete/permission",
           recreateForm: true,
           delData: {  
                      hehe: function () {return 12; }    
                    }
    },
    editbutton: false,
    delbutton: true,//disable delete button
}

傳送的資料截圖：

　　　　　　

 

6. jqgrid 格式化 單元格資料：

{
    name: 'partId',
    index: 'partId',
    width: 60,
    editable: true,
    sorttype: 'number',
    formatter : partIdFormat, ///格式化函式
    unformat : partIdUnFormat, ///編輯時的值
}
function partIdFormat(cellvalue, options, cell){
    var  partName = cellvalue;
    try{
        var json = ${partText};
        $.each(json , function(i ,val){
            if(val.partId == cellvalue){
                partName = val.partName;
                return false;
            }
        });
    }catch (e) {
        console.error(e);
    }
    return partName;
}

 7. jgrid 單元格自動換行：

<style>
.ui-jqgrid tr.jqgrow td {
white-space: normal !important;
height:auto;
}
</style>

過長用省略號表示：

<style>
.ui-jqgrid tr.jqgrow td {
text-overflow : ellipsis;
}
</style>

 

 

相關文章