jQuery Easyui DataGrid应用

时间:2024-09-16 08:04:07

冻结列

jQuery Easyui DataGrid应用
$('#tbList').datagrid({ pagination: true,
frozenColumns: [[
{ field: 'BId',checkbox:'true',width:30},
{ field: 'BNo', title: '牌号', width: 100 },
{ field: 'FNo', title: '班号', width: 100 }
  ]],
       fitColumns:false //禁止自适应宽度、可以水平滚动
});
jQuery Easyui DataGrid应用

去掉分页

$('#tbList').datagrid({pagination: true});

更改为

$('#tbList').datagrid();

$('#tbList').datagrid({pagination: false});

注意:同时需要设置table的高度,而且不能为auto

复选框以及单选

jQuery Easyui DataGrid应用
<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>
jQuery Easyui DataGrid应用

变为单选(添加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")">

加载数据后默认全选:

 $(document).ready(function () {
$('#tbList').datagrid({
onLoadSuccess: function (data) {
$(
'#tbList').datagrid('selectAll');
}

});

获取行数

$('#tbList').datagrid("getRows").length;

隐藏列

<th field="Dept" width="100" hidden="true">名称</th>

清空原有数据

方法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:载入本地数据,旧记录将被移除。

事件:

 $('#tbList').datagrid({ onClickRow: function () {//代码  } });

datagrip单击行的时候,将单选按钮设置为选中:

jQuery Easyui DataGrid应用
<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(){ //呈现列表数据
  $('#tbList').datagrid({ onClickRow:
function () {
//单击行的时候,将单选按钮设置为选中
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>
jQuery Easyui DataGrid应用

table中td的时间格式问题

1.页面

<th field="Test" formatter="Common.TimeFormatter" width="50" ></th>

2.js

jQuery Easyui DataGrid应用
var Common = {
//EasyUI用DataGrid用日期格式化
TimeFormatter: function (value, rec, index) {
if (value == undefined) {
return "";
}
/*json格式时间转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);
} };
jQuery Easyui DataGrid应用

table中td内容太长自动换行

 添加属性 nowrap="false"

行和复选框的分离(2013-03-25)

checkOnSelect="false" selectOnCheck="false"

注意:当使用$("#tbList").datagrid("getSelections");时候,只有行被选中,才能取到该行。一般情况,选中行时候,行为黄色背景。

eg.<table checkOnSelect="false"> </table>

jQuery Easyui DataGrid应用
var selected = $("#tbList").datagrid("getSelections");
if (selected.length == 0) {
alert("请选择!");
return;
} var idString = "";
$.each(selected, function (index, item) {
idString += item.Id + ",";
});
jQuery Easyui DataGrid应用

 设置数据列表的样式

jQuery Easyui DataGrid应用
 $(document).ready(function () {
//呈现列表数据
$('#tbList').datagrid({ pagination: true,
rowStyler: function(index,row){
if (row.ID< 10) {//那么数据的id字段小于10的,将显示为灰色字体
return 'color:#999;';//和一般的样式写法一样
}
}
});
});
jQuery Easyui DataGrid应用