心存善念通过本文主要向大家介绍了easyui datagrid,easyui datagrid属性,easyui datagrid分页,easyui datagrid编辑,easyui datagrid api等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
一、简单示例
HTML
<table id="tbList" striped="true" rownumbers="true" fix="true" fitcolumns="true" title="标题"
idfield="ID" checkbox="true" url="@Url.Action("ListData")">
<thead>
<tr>
<th field="ID" checkbox="true" width="30">
</th>
<th field="Name" width="200" align="center">
名称
</th>
</tr>
</thead>
</table>
</div>
JS
$('#tbList').datagrid({ pagination: true });
$("#btnSearch").click(function () {//查询方法
$('#tbList').datagrid("unselectAll");
$('#tbList').datagrid({ queryParams: { SearchName: $("#SearchName").val()} });
});
</div>
二、基本用法
冻结列
$('#tbList').datagrid({ pagination: true,
frozenColumns: [[
{ field: 'BId',checkbox:'true',width:30},
{ field: 'BNo', title: '牌号', width: 100 },
{ field: 'FNo', title: '班号', width: 100 }
]],
fitColumns:false //禁止自适应宽度、可以水平滚动
});
</div>
去掉分页
$('#tbList').datagrid({pagination: true});
</div>
更改为
$('#tbList').datagrid();
</div>
或
$('#tbList').datagrid({pagination: false});
</div>
注意：同时需要设置table的高度，而且不能为auto
复选框以及单选
<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>
</div>
变为单选（添加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")">
</div>
加载数据后默认全选：
$(document).ready(function () {
$('#tbList').datagrid({
onLoadSuccess: function (data) {
$('#tbList').datagrid('selectAll');
}
});
</div>
获取行数
$('#tbList').datagrid("getRows").length;
</div>
隐藏列
<th field="Dept" width="100" hidden="true">名称</th></div>
清空原有数据
方法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);
}
}
</div>
方法2：(测试过)
$('#filegrid').datagrid('loadData', { total: 0, rows: [] });
</div>
解析：loadData：载入本地数据，旧记录将被移除。
行点击事件
$('#tbList').datagrid({ onClickRow: function () {//代码 } });
</div>
datagrip单击行的时候，将单选按钮设置为选中
<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>
</div>
table中td的时间格式问题
1.页面
<th field="Test" formatter="Common.TimeFormatter" width="50" ></th></div>
2.js
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);
}
};
</div>
table中td内容太长自动换行
添加属性 nowrap="false"
将nowrap: false这个属性设置在table的属性中，不要设置在字段的属性中，字段可以设置宽度，这样就可以做到当文字长度超过规定的宽度后自动换行了
行和复选框的分离
方法一：（1.3版本才能用）
checkOnSelect="false" selectOnCheck="false"</div>
注意：当使用$("#tbList").datagrid("getSelections");时候，只有行被选中，才能取到该行。一般情况，选中行时候，行为黄色背景。
eg.<table checkOnSelect="false"> </table>
var selected = $("#tbList").datagrid("getSelections");
if (selected.length == 0) {
alert("请选择！");
return;
}
var idString = "";
$.each(selected, function (index, item) {
idString += item.Id + ",";
});
</div>
方法二（1.3版本之前的解决方法）
var IsCheckFlag = true;
$('#tbList').datagrid({
pagination: true,
onClickCell: function (rowIndex, field, value) {
IsCheckFlag = false;
},
onSelect: function (rowIndex, rowData) {
if (!IsCheckFlag) {
IsCheckFlag = true;
$("#tbList").datagrid("unselectRow", rowIndex);
}
},
onUnselect: function (rowIndex, rowData) {
if (!IsCheckFlag) {
IsCheckFlag = true;
$("#tbList").datagrid("selectRow", rowIndex);
}
}
});
</div>
设置数据列表的样式
$(document).ready