Easyui Demo網(wǎng)站:
http://www.jeasyui.com/ 英文
http://www.phptogether.com/juidoc/ 中文
datagrip的基本屬性方法:http://www.phptogether.com/juidoc/datagrid.html
推薦:http://www.cnblogs.com/Philoo/tag/jQuery/
凍結(jié)列 (2013-01-17 )
$('#tbList').datagrid({ pagination: true, frozenColumns: [[ { field: 'BId',checkbox:'true',width:30}, { field: 'BNo', title: '牌號', width: 100 }, { field: 'FNo', title: '班號', width: 100 } ]], fitColumns:false //禁止自適應(yīng)寬度、可以水平滾動 });
去掉分頁(2013-02-20)
$('#tbList').datagrid({pagination: true});
更改為
$('#tbList').datagrid();
或
$('#tbList').datagrid({pagination: false});
注意:同時需要設(shè)置table的高度,而且不能為auto
復(fù)選框以及單選(2013-02-20)
<table id="tbList" style="height: 330px;" striped="true" rownumbers="true" fitColumns="true" title="" iconcls="icon-edit"
checkbox="true" idfield="Id" url="@Url.Action("ListData")"><thead> <tr> <th field="Id" checkbox="true" width="150"> </th>
</tr></thead></table>
變?yōu)閱芜x(添加singleSelect="true" )
<table id="tbList" style="height: 330px;" striped="true" rownumbers="true" fitColumns="true" title="" iconcls="icon-edit" singleSelect="true" checkbox="true" idfield="Id" url="@Url.Action("ListData")">
加載數(shù)據(jù)后默認全選:
$(document).ready(function () { $('#tbList').datagrid({ onLoadSuccess: function (data) { $('#tbList').datagrid('selectAll'); } });
獲取行數(shù)(2013-02-20)
$('#tbList').datagrid("getRows").length;
隱藏列(2013-02-20)
<th field="Dept" width="100" hidden="true">名稱</th>
清空原有數(shù)據(jù)(2013-02-20)
方法1:
var item = $('#filegrid').datagrid('getRows');
if (item) {
for (var i = item.length - 1; i >= 0; i--) {
var index = $('#filegrid').datagrid('getRowIndex', item[i]);
$('#filegrid').datagrid('deleteRow', index);
}
}
方法2:(測試過)
$('#filegrid').datagrid('loadData', { total: 0, rows: [] });
解析:loadData:載入本地數(shù)據(jù),舊記錄將被移除。
事件(2013-02-20):
$('#tbList').datagrid({ onClickRow: function () {//代碼 } });
datagrip單擊行的時候,將單選按鈕設(shè)置為選中(2013-02-20):
<script type="text/javascript"> var List = {}; List.RadioFormatter = function (value, rec, index) { return "<input id='radio_id' name='radio_name' type='radio' value='" + rec.Id + "'/>"; }; $(document).ready( function(){ //呈現(xiàn)列表數(shù)據(jù) $('#tbList').datagrid({ onClickRow: function () { //單擊行的時候,將單選按鈕設(shè)置為選中 var id = $('#tbList').datagrid("getSelected"); $("input[name='name']").each(function () { if ($(this).val() == id.Id) { $(this).attr("checked", true); } }); } });});</script><table id="tbList" style="height: 300px;" striped="true" rownumbers="true" fitColumns="true" title="" iconcls="icon-edit" singleSelect="true" checkbox="true" idfield="Id" url="@Url.Action("ListData")"> <thead> <tr> <th field="Id" width="30" formatter="PickupList.RadioFormatter"> </th> </tr> </thead> </table>
table中td的時間格式問題(2013-03-14)
1.頁面
<th field="Test" formatter="Common.TimeFormatter" width="50" ></th>
2.js
var Common = { //EasyUI用DataGrid用日期格式化 TimeFormatter: function (value, rec, index) { if (value == undefined) { return ""; } /*json格式時間轉(zhuǎn)js時間格式*/ value = value.substr(1, value.length - 2); var obj = eval('(' + "{Date: new " + value + "}" + ')'); var dateValue = obj["Date"]; if (dateValue.getFullYear() < 1900) { return ""; } var val = dateValue.format("yyyy-mm-dd HH:MM");//控制格式 return val.substr(11, 5); }};
table中td內(nèi)容太長自動換行(2013-03-18)
添加屬性 nowrap="false"
行和復(fù)選框的分離(2013-03-25)
checkOnSelect="false" selectOnCheck="false"
注意:當(dāng)使用$("#tbList").datagrid("getSelections");時候,只有行被選中,才能取到該行。一般情況,選中行時候,行為黃色背景。
eg.<table checkOnSelect="false"> </table>
設(shè)置數(shù)據(jù)列表的樣式
$(document).ready(function () { //呈現(xiàn)列表數(shù)據(jù) $('#tbList').datagrid({ pagination: true, rowStyler: function(index,row){ if (row.ID< 10) {//那么數(shù)據(jù)的id字段小于10的,將顯示為灰色字體 return 'color:#999;';//和一般的樣式寫法一樣 } } }); });
聯(lián)系客服