前端之家收集整理的这篇文章主要介绍了
jquery easyui DataGrid简单示例，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
@H_502_0@
一、简单示例
@H_
502_0@HTML
标题"
idfield="ID" check
Box="true" url="@Url.Action("ListData")">
Box="true" width="30">
名称
|
@H_502_0@JS
查询
方法
$('#tbList').datagrid("unselectAll");
$('#tbList').datagrid({ queryParams: { SearchName: $("#SearchName").val()} });
});
冻结列
Box:'true',width:30},{ field: 'BNo',title: '牌号',width: 100 },{ field: 'FNo',title: '班号',width: 100 }
]], fitColumns:false //
禁止自适应宽度、可以水平滚动
});
@H_502_0@更改为
@H_502_0@或
@H_502_0@注意：同时需要设置table的高度，而且不能为auto
@H_502_0@复选框以及单选
Box="true" idfield="Id" url="@Url.Action("ListData")">
Box="true" width="150">
@H_502_0@变为单选（添加singleSelect="true" ）
@H_502_0@Box="true" idfield="Id" url="@Url.Action("ListData")">
@H_502_0@加载数据后默认全选：
@H_502_0@
@H_502_0@隐藏列
名称
@H_502_0@清空原有数据
@H_502_0@方法1：
= 0; i--) {
var index = $('#filegrid').datagrid('getRowIndex',item[i]);
$('#filegrid').datagrid('deleteRow',index);
}
}
@H_502_0@方法2：(测试过)
@H_502_0@解析：loadData：载入本地数据，旧记录将被移除。
@H_502_0@行点击事件
代码 } });
@H_502_0@datagrip单击行的时候，将单选按钮设置为选中
dioFormatter = function (value,rec,index) {
return "
";
};
$(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);
}
});
}
});
});
Box="true" idfield="Id" url="@Url.Action("ListData")">
dioFormatter">
@H_502_0@table中td的时间格式问题
@H_502_0@1.页面
@H_502_0@2.js
};
@H_502_0@table中td内容太长自动换行
@H_502_0@添加属性 nowrap="false"
@H_502_0@将nowrap: false这个属性设置在table的属性中，不要设置在字段的属性中，字段可以设置宽度，这样就可以做到当文字长度超过规定的宽度后自动换行了
@H_502_0@行和复选框的分离
@H_502_0@方法一：（1.3版本才能用）
@H_502_0@注意：当使用$("#tbList").datagrid("getSelections");时候，只有行被选中，才能取到该行。一般情况，选中行时候，行为黄色背景。
@H_502_0@eg.
var idString = "";
$.each(selected,function (index,item) {
idString += item.Id + ",";
});
@H_502_0@方法二（1.3版本之前的解决方法）
@H_502_0@设置数据列表的样式
显示为灰色字体
return 'color:#999;';//和一般的样式写法一样
}
}
});
});
@H_502_0@
@H_502_0@复选框的bug:使用参数查询时候，在查询之前选中的选项 ，在查询之后，使用getSelections方法去获取，依旧存在该选项
@H_502_0@解决方案：通过unselectAll在查询之前清空复选框即可
@H_502_0@查询bug:使用参数查询时候，在查询之后，显示的当前页码还是之前的 ，不会重置为1，还是之前页码；如果当前总页数为比当前小，导致页面显示为空。比如，当前第三页，加入时间查询后，只有1页数据，那么当前页码还是3，导致页面显示空白。
@H_502_0@解决方案：设置pageNumber为 1
@H_502_0@三、行数据的增删改
@H_502_0@HTML（不分页列表）
@H_502_0@
@H_
502_0@JS
}
});
//将新插入的那一行开户编辑状态
datagrid.datagrid("beginEdit",0);
//给当前编辑的行赋值
editRow = 0;
}
}
},'-',{
text: '删除',iconCls: 'icon-remove',handler: function () {
//删除时先获取选择行
var rows = datagrid.datagrid("getSelections");
//选择要删除的行
if (rows.length > 0) {
$.messager.confirm("<a href="/tag/tishi/" target="_blank" class="keywords">提示</a>","你确定要<a href="/tag/shanchu/" target="_blank" class="keywords">删除</a>吗?",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("请选择要<a href="/tag/shanchu/" target="_blank" class="keywords">删除</a>的信息！");
}
}
});
}
else {
$.messager.alert("<a href="/tag/tishi/" target="_blank" class="keywords">提示</a>","请选择要<a href="/tag/shanchu/" target="_blank" class="keywords">删除</a>的行","error");
}
}
},{
text: '<a href="/tag/xiugai/" target="_blank" class="keywords">修改</a>',iconCls: 'icon-edit',handler: function () {
//<a href="/tag/xiugai/" target="_blank" class="keywords">修改</a>时要<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>选择到的行
var rows = datagrid.datagrid("getSelections");
//如果只选择了一行则可以进行<a href="/tag/xiugai/" target="_blank" class="keywords">修改</a>，否则不操作
if (rows.length == 1) {
//<a href="/tag/xiugai/" target="_blank" class="keywords">修改</a>之前先<a href="/tag/guanbi/" target="_blank" class="keywords">关闭</a>已经开启的编辑行，当<a href="/tag/diaoyong/" target="_blank" class="keywords">调用</a>endEdit该<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>时会触发onAfterEdit事件
if (editRow != undefined) {
datagrid.datagrid("endEdit",editRow);
}
//当无编辑行时
if (editRow == undefined) {
//<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>到当前选择行的下标
var index = datagrid.datagrid("getRowIndex",rows[0]);
//开启编辑
datagrid.datagrid("beginEdit",index);
//把当前开启编辑的行赋值给<a href="/tag/quanjubianliang/" target="_blank" class="keywords">全局变量</a>editRow
editRow = index;
//当开启了当前选择行的编辑状态之后，
//应该取消当前列表的所有选择行，要不然双击之后无法再选择其他行进行编辑
datagrid.datagrid("unselectAll");
}
}
}
},{
text: '保存',handler: function () {
//保存时结束当前编辑的行，<a href="/tag/zidong/" target="_blank" class="keywords">自动</a>触发onAfterEdit事件如果要与<a href="/tag/houtai/" target="_blank" class="keywords">后台</a>交互可将数据通过Ajax提交<a href="/tag/houtai/" target="_blank" class="keywords">后台</a>
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该<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>触发此事件
//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;
}
}
});
});
@H_
502_0@以上就是本文的全部
内容，希望对大家的学习有所帮助，也希望大家多多
支持编程之家。
