EasyUi – 4.datagrid

测试的时候用Json来测试就好啦。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="../Scripts/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script><script src="../Scripts/jquery-easyui-1.3.2/jquery.easyui.min.js"></script><link href="../Scripts/jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet"><link href="../Scripts/jquery-easyui-1.3.2/themes/icon.css" rel="stylesheet" /><script src="../Scripts/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js"></script><script type="text/javascript">$(function() {$('#datagrid').datagrid({url: 'main.ashx', //用一般处理程序idField: 'id',toolbar: [{text: '新增',iconCls: 'icon-add'}, '-', {text: '修改'}, '-', {text: '删除',iconCls: 'icon-remove'}, '-', {text: '查询',iconCls: 'icon-search'}],columns: [[{ field: 'UserID', title: '编号', width: 100 },{ field: 'UserName', title: '账号', width: 100 },{ field: 'PassWord', title: '密码', width: 100, align: 'right' }]],loadFilter: function (data) {console.info(data);if (data.d) {return data.d;} else {return data;}}});})</script>
</head>
<body><div><table id="datagrid"></table></div>
</body>
</html>

main.ashx

public void ProcessRequest(HttpContext context){context.Response.ContentType = "text/html";BLL.TUser user = new BLL.TUser();DataSet ds = user.GetAllList();context.Response.Write(DBUtility.JsonConvert.DatasetToJson(ds));}

常见错误：

1.field要一致。

2.翻页查询

select top @rows * from TUser where UserID>
(select max(UserID) from (select top (@page-1)*@row UserID from TUser order by UserID ASC ) t0
)
order by UserID ASC /*例子:第2页*/
select top 10 * from TUser where UserID>
(select max(UserID) from (select top 10 UserID from TUser order by UserID ASC ) t0
)
order by UserID ASC

sql 2008(@ROWS_NUMBER)

select * from  (select *,ROW_NUMBER() over(order by SortId desc) as rownum from RB_Activity)
((@page-1) * @rows) and (@page * @rows)

3.formatter：编辑按钮

columns: [[{field: '设备号',title: '设备号',width: 100,},{ field: '报警状态', title: '报警状态', width: 150 },{ field: '车辆状态', title: '车辆状态', width: 150 },{ field: '定位状态', title: '定位状态', width: 150 },{ field: '上传时间', title: '上传时间', width: 150 },{ field: '开通时间', title: '开通时间', width: 150 },{ field: '到期时间', title: '到期时间', width: 150 },{field: '地址', title: '操作', width: 150,formatter: function (value, row, index) {return '<a style="cursor:pointer;" onclick="show(' + index + ')">详细</a>';}},]],

getRows none 返回当前页的记录。

function show(i) {var row = _datagrid.datagrid('getRows');console.info(row[i]);

console.info数据

4.修改窗口

html部分

<!--------修改 —— 窗口--------><div id="EditAndRegDialog" title="修改用户信息" style="width: 300px; height: 234px;"><form id="EditForm" method="post"><table style="margin-top: 20px; padding-left: 20px"><tr><th align="right">ID：</th><td><!--直接使用验证规则class="easyui-validatebox"--><input name="UserID" /></td></tr><tr><th align="right">用户名：</th><td><!--直接使用验证规则class="easyui-validatebox"--><input name="name" class="easyui-validatebox" data-options="required:true" /></td></tr><tr><th align="right">密码：</th><td><!--把角色写完后加上去           validType:'length[8,12]'--><input name="password" type="password" class="easyui-validatebox" data-options="required:true," /></td></tr><tr><th align="right">角色：</th><td><select class="easyui-combobox" id="Select1" runat="server" name="sRole" style="width: 100px;" editable="false" data-options="required:true"><option value="0">管理员</option><option value="1">普通员工</option></select></td></tr><tr><th align="right">修改时间：</th><td><input name="editTime" /></td></tr></table></form></div>

js部分

//----------------------修改-----------------------function editFun() {var rows = _datagrid.datagrid('getSelections');//alert(rows[0].UserName);//选择多行if (rows.length != 1 && rows.length != 0) {var names = [];for (var i = 0; i < rows.length; i++) {names.push(rows[i].UserName);}$.messager.show({title: '提示',msg: '只能选择一个用户编辑！<br>您选择了' + names.length + '个用户！'});} else if (rows.length == 0) {$.messager.alert('提示', '请选择要修改的记录!', 'error')}//选择1行else if (rows.length == 1) {$("#EditAndRegDialog").dialog({closable: true,modal: true,buttons: [{text: '修改',iconCls: 'icon-ok',handler: function () {//***先验证（根据自己的需求）      if ($("#EditForm").form('validate') == true) {//ajax提交  $.post("Edit.ashx", $("#EditForm").form().serialize(),function (msg) {//alert(msg);if (msg == "1") {$("#EditAndRegDialog").dialog("close");//刷新当前页reload_datagrid.datagrid('reload', {UserName: '',});$.messager.show({title: '提示',msg: "修改成功！"});} else {$.messager.show({title: '提示',msg: msg});}}, 'json');}}}]});$("#EditForm input[name='UserID']").attr('readonly', 'readonly');$("#EditForm input[name='name']").attr('readonly', 'readonly');$("#EditForm input[name='editTime']").attr('readonly', 'readonly');var d = new Date();LoginInputForm = $('#EditForm').form("load", {UserID: rows[0].UserID,name: rows[0].UserName,password: '',sRole: rows[0].Roel,editTime: d.format('yyyy-MM-dd'),});}}

5.删除多行

前台

//----------------------删除-----------------------function DeleteFun() {var rows = _datagrid.datagrid('getSelections');if (rows.length == 0) {$.messager.alert('提示', '请选择要删除的记录!', 'error');}else if (rows.length >= 1) {var

parm; //循环给提交删除参数赋值(音乐风格编码)

                    $.each(rows, function

(i, n) { if (i == 0) { parm = "CustomerID=" + n.CustomerID; } else { parm += "&CustomerID=" +

 n.CustomerID;}});$.messager.confirm('请确认', '您确定删除当前所选的记录吗？请谨慎操作！', function(judge) {if (judge) {//alert(rows[0].UserID)$.post("Delete.ashx", parm,function(msg) {//alert(msg);if (msg == "1") {_datagrid.datagrid('unselectAll');//刷新当前页reload_datagrid.datagrid('reload', {LoginName: '',dateLess: '',dateMore: '',});$.messager.show({title: '提示',msg: "删除成功！"});} else {$.messager.show({title: '提示',msg: msg});}}, 'json');}});}}

后台

　　　HttpRequest Request;

　　　HttpResponse Response;public void ProcessRequest(HttpContext context){context.Response.ContentType = "text/html";Request = context.Request;Response = context.Response;string CustomerID = Request["CustomerID"];if (CustomerID != null){BLL.PEK_CustomerLog BllTuser = new BLL.PEK_CustomerLog();BllTuser.DeleteList(CustomerID);Response.Write("1");}else{Response.Write("删除失败");}}

EasyUi – 4.datagrid相关推荐

给Jquery easyui 的datagrid 每行增加操作链接（转载）
转自:http://www.thinkphp.cn/code/207.html 通过formatter方法给Jquery easyui 的datagrid 每行增加操作链接我们都知道Jquery的E ...
给Jquery easyui 的datagrid 每行增加操作链接(转)
http://www.thinkphp.cn/code/207.html 通过formatter方法给Jquery easyui 的datagrid 每行增加操作链接我们都知道Jquery的Easy ...
easyui使用datagrid时列名包含特殊字符导致表头与数据错位的问题
做一个用easyui的datagrid显示数据的功能时发现表格的列头与数据错位了,而且这个现象不总是能重现,一直没搞清楚原因.后来偶然在控制台看出了一点端倪: 推测表头或者单元格的class名应该是用 ...
SSh结合Easyui实现Datagrid的分页显示
近日学习Easyui,发现非常好用,界面很美观.将学习的心得在此写下,这篇博客写SSh结合Easyui实现Datagrid的分页显示,其他的例如添加.修改.删除.批量删除等功能将在后面的博客一一写来. ...
MVC简捷调用EasyUI的datagrid
一直想在项目中使用EasyUi的datagrid,但种种原因,没有实现. 这两天在开发一个项目中,愿望终于得以实现. 先看效果: 实现步骤是这样的: 1,在页面中画dataGrid,具体代码如下: & ...
springmvc 后台向页面EasyUI的Datagrid传递数据（JSon格式）
===============EasyUIDatagrid 分页==================== EasyUIDatagrid 需要提供的JSon格式为:total和rows,所以我们只需要在 ...
datagrid vue_类似 easyui 中 datagrid 使用习惯的 element-ui 数据表格组件（el-datagrid）...
背景 element-ui 中的 el-table 组件只提供了数据展示,而分页功能作为一个单独的组件 el-pagination,并没有像 Ant Design 一样集成到 el-able 组件中, ...
easyui的datagrid的使用方法
环境:Spring boot +Thymeleaf+jps+easyui 引入thymeleaf模板引擎 <html lang="en" xmlns:th="htt ...
EasyUI的DataGrid 分页栏英文改中文解决方案
EasyUI的DataGrid 分页栏英文改中文解决方案参考文章: (1)EasyUI的DataGrid 分页栏英文改中文解决方案 (2)https://www.cnblogs.com/tahn30 ...
给Jquery easyui 的datagrid 每行添加操作链接
背景我们都知道Jquery的Easy-UI的datagrid能够加入而且自己定义Toolbar,这样我们选择一行然后选择toolbar的对应button就能够对这行的数据进行操作.但实际项目里我们可 ...