一、简单示例
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>
JS
$('#tbList').datagrid({
pagination: true }
);
$("#btnSearch").click(function () {
//查询方法 $('#tbList').datagrid("unselectAll");
$('#tbList').datagrid({
queryParams: {
SearchName: $("#SearchName").val()}
}
);
}
);
二、基本用法
冻结列
$('#tbList').datagrid({
pagination: true, frozenColumns: [[ {
field: 'BId',checkbox:'true',width:30}
, {
field: 'BNo', title: '牌号', width: 100 }
, {
field: 'FNo', title: '班号', width: 100 }
]], fitColumns:false //禁止自适应宽度、可以水平滚动 }
);
去掉分页
$('#tbList').datagrid({
pagination: true}
);
更改为
$('#tbList').datagrid();
或
$('#tbList').datagrid({
pagination: false}
);
注意：同时需要设置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>
变为单选（添加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单击行的时候，将单选按钮设置为选中
<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>
table中td的时间格式问题
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格式时间转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内容太长自动换行
添加属性 nowrap="false"
将nowrap: false这个属性设置在table的属性中，不要设置在字段的属性中，字段可以设置宽度，这样就可以做到当文字长度超过规定的宽度后自动换行了
行和复选框的分离
方法一：（1.3版本才能用）
checkOnSelect="false" selectOnCheck="false"
注意：当使用$("#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 + ",";
}
);
方法二（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);
}
}
}
);
设置数据列表的样式
$(document).ready(function () {
//呈现列表数据 $('#tbList').datagrid({
pagination: true, rowStyler: function(index,row){
if (row.ID< 10) {
//那么数据的id字段小于10的，将显示为灰色字体 return 'color:#999;
';
//和一般的样式写法一样 }
}
}
);
}
);
条件查询
复选框的bug:使用参数查询时候，在查询之前选中的选项 ，在查询之后，使用getSelections方法去获取，依旧存在该选项
解决方案：通过unselectAll在查询之前清空复选框即可
$("#btnSearch").click(function () {
$('#tbList').datagrid("unselectAll");
$('#tbList').datagrid({
queryParams: {
SearchName: $("#SearchName").val() }
}
);
}
);
查询bug:使用参数查询时候，在查询之后，显示的当前页码还是之前的 ，不会重置为1，还是之前页码；如果当前总页数为比当前小，导致页面显示为空。比如，当前第三页，加入时间查询后，只有1页数据，那么当前页码还是3，导致页面显示空白。
解决方案：设置pageNumber为 1
$("#btnSearch").click(function () {
$('#tbList').datagrid("unselectAll");
$('#tbList').datagrid({
pageNumber: 1,queryParams: {
SearchName: $("#SearchName").val() }
}
);
}
);
三、行数据的增删改
HTML（不分页列表）
复制代码 代码如下:
<table id="tbProductList" style="height: 500px; max-height: 500px;" fix="true" fitcolumns="true" idfield="ID" url="@Url.Action("ListData")"></table>
JS
$(document).ready(function () {
var datagrid;
var editRow = undefined;
datagrid = $("#tbList").datagrid({
border: true, checkbox: true, iconCls: 'icon-save', //图标 nowap: true, //列内容多时自动折至第二行 pagination: false, rownumbers: true, striped: true, //行背景交换 columns: [[//显示的列 {
field: 'ID', title: '编号', width: 100, align: 'center', sortable: true, checkbox: true }
, {
field: 'Name', title: '名称', width: 100, sortable: true }
, {
field: 'PriceType', title: '类型', width: 100, align: 'center', formatter: function (value, row) {
return row.TypeName;
}
, editor: {
type: 'combobox', options: {
valueField: 'Value', textField: 'Text', method: 'get', url: $("#TypeUrl").val(), required: true }
}
}
, {
field: 'Price', title: '价格', width: 100, align: 'center', editor: {
type: 'numberbox', options: {
required: true, min: 0, precision: 2 }
}
}
, {
field: 'Count', title: '数量', width: 100, align: 'center', editor: {
type: 'numberbox', options: {
required: true, min: 0, precision: 0 }
}
}
]], queryParams: {
action: 'query' }
, //查询参数 toolbar: [{
text: '添加', iconCls: 'icon-add', handler: function () {
//添加列表的操作按钮添加，修改，删除等 //添加时先判断是否有开启编辑的行，如果有则把开户编辑的那行结束编辑 if (editRow != undefined) {
datagrid.datagrid("endEdit", editRow);
}
//添加时如果没有正在编辑的行，则在datagrid的第一行插入一行 if (editRow == undefined) {
datagrid.datagrid("insertRow", {
index: 0, // index start with 0 row: {
}
}
);
//将新插入的那一行开户编辑状态 datagrid.datagrid("beginEdit", 0);
//给当前编辑的行赋值 editRow = 0;
}
}
}
, '-', {
text: '删除', iconCls: 'icon-remove', handler: function () {
//删除时先获取选择行 var rows = datagrid.datagrid("getSelections");
//选择要删除的行 if (rows.length > 0) {
$.messager.confirm("提示", "你确定要删除吗?", function (r) {
if (r) {
var ids = [];
for (var i = 0;
i < rows.length;
i++) {
ids.push(rows[i].ID);
}
//将选择到的行存入数组并用,分隔转换成字符串 if ($.trim(ids) != "") {
//---- Delete(ids.join(','));
//这是post }
else {
alert("请选择要删除的信息！");
}
}
}
);
}
else {
$.messager.alert("提示", "请选择要删除的行", "error");
}
}
}
, '-', {
text: '修改', iconCls: 'icon-edit', handler: function () {
//修改时要获取选择到的行 var rows = datagrid.datagrid("getSelections");
//如果只选择了一行则可以进行修改，否则不操作 if (rows.length == 1) {
//修改之前先关闭已经开启的编辑行，当调用endEdit该方法时会触发onAfterEdit事件 if (editRow != undefined) {
datagrid.datagrid("endEdit", editRow);
}
//当无编辑行时 if (editRow == undefined) {
//获取到当前选择行的下标 var index = datagrid.datagrid("getRowIndex", rows[0]);
//开启编辑 datagrid.datagrid("beginEdit", index);
//把当前开启编辑的行赋值给全局变量editRow editRow = index;
//当开启了当前选择行的编辑状态之后， //应该取消当前列表的所有选择行，要不然双击之后无法再选择其他行进行编辑 datagrid.datagrid("unselectAll");
}
}
}
}
, '-', {
text: '保存', iconCls: 'icon-save', handler: function () {
//保存时结束当前编辑的行，自动触发onAfterEdit事件如果要与后台交互可将数据通过Ajax提交后台 datagrid.datagrid("endEdit", editRow);
}
}
, '-', {
text: '取消编辑', iconCls: 'icon-redo', handler: function () {
//取消当前编辑行把当前编辑行罢undefined回滚改变的数据,取消选择的行 editRow = undefined;
datagrid.datagrid("rejectChanges");
datagrid.datagrid("unselectAll");
}
}
, '-'], onAfterEdit: function (rowIndex, rowData, changes) {
//endEdit该方法触发此事件 //console.info(rowData);
//---- Update(ids.join(','));
//这是post editRow = undefined;
}
, onDblClickRow: function (rowIndex, rowData) {
//双击开启编辑行 if (editRow != undefined) {
datagrid.datagrid("endEdit", editRow);
}
if (editRow == undefined) {
datagrid.datagrid("beginEdit", rowIndex);
editRow = rowIndex;
}
}
}
);
}
);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
