公司有個項目前端主要是用jqGrid來做的,對於俺這新人且前端不熟的人而言,難度還是有點大,記錄下本人在此次開發中所使用的屬性或方法。
viewrecords:true,顯示記錄
rowNum:-1,設置可顯示的行數當前返回最大值(例如:返回100條數據,界面可顯示的數據為100,返回1000,界面可顯示的數據為1000.適合用在未分頁但是不可預測返回多少行的情況)
單擊行之前觸發的事件:beforeSelectRow
單機行時觸發的事件:onSelectRow
設置多選:multiselect: true,
根據ID獲取某一行數據:$("#gridList").jqGrid("getRowData", ID)
凍結列:在渲染列的時候(colModel里面)添加 Frozen:true;然后 jQuery("#gridList").jqGrid('setFrozenColumns');
重新執行url方法 傳遞參數(keyword):$("#gridList").jqGrid('setGridParam',{postData: { keyword: $("#txt_keyword").val() }}).trigger('reloadGrid');
從界面上移除某一行(沒有修改數據庫): $("#gridList").jqGrid("delRowData", id);
獲取所有選中行ID:var ids = $('#gridList').jqGrid('getGridParam', 'selarrrow');
獲取所有行ID:var ids = $('#gridList').jqGrid('getDataIDs');
設置行可編輯:
editable: true,
edittype: 'text',
editoptions: { size: 10, maxlength: 15 },
editrules: { required: true },
formoptions: { elmprefix: '(*)' }
上面是自帶的行編輯
本人更喜歡這種行編輯方式:
{
name: 'Amount', width: 80, align: 'right',
formatter: function (value, options, rowObject)
{
value = value == null ? "0.00" : rowObject.Amount;
return "<input class=\"form-control \" id=\"" + rowObject.ID + "Amount\" onkeyup=KeyUpAmount('" + rowObject.ID + "',this.id,this) value=\"" + value + "\"/>";
}
}
注意:提交表單的時候注意把input的value 取出來賦值給Amount,不然沒法提交
格式化日期:
{
label: '銷售日期', name: 'CreateDateTime', width: 160, align: 'left'
, formatter: "date", formatoptions: { srcformat: 'Y-m-d', newformat: 'Y-m-d' }
}
設置無數據時提示文字不顯示:
unwritten: false
暫時能想到的就這么多了。。。。后續遇到再補
操作里面多個按鈕,分別顯示懸停文字 在格式化按鈕的時候加入title屬性,如: "<i title=\"下載\" class=\"fa fa-cloud-download\"></i>"