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: },
{ field: 'UserName', title: '账号', width: },
{ field: 'PassWord', title: '密码', width: , 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("");
}
else
{
Response.Write("删除失败");
}
}
EasyUi – 4.datagrid的更多相关文章
- easyUI 中datagrid 返回列隐藏方法
easyui的datagrid方法返回的列,有的值不需要显示可以使用hidden(属性进行隐藏) columns : [ [{ field : 'bailClass', title : '类别', w ...
- EasyUI 中 DataGrid 控件 列 如何绑定对象中的属性
EasyUI 中 DataGrid 控件 是我们经常用到的控件之一, 但是 DataGrid 控件 在绑定显示列时却不支持对象属性绑定. 模型如下: public class Manager impl ...
- easyui的datagrid行的某一列添加链接
通过formatter方法给easyui 的datagrid 每行增加操作链接. 效果图 jsp代码: <th field="url" width="100&quo ...
- easyui的datagrid打印(转)
在使用easyui插件的时候,使用最多的应该是datagrid插件.有时候根据客户需求,可能需要将datagrid内容进行打印,这时候如果直接调用window.print,可能由于easyui的dat ...
- EasyUI的datagrid分页
EasyUI的datagrid分页 前台代码: <script type="text/javascript"> $(function () { //查询 search( ...
- easyui使用datagrid时列名包含特殊字符导致表头与数据错位的问题
做一个用easyui的datagrid显示数据的功能时发现表格的列头与数据错位了,而且这个现象不总是能重现,一直没搞清楚原因.后来偶然在控制台看出了一点端倪: 推测表头或者单元格的class名应该是用 ...
- 利用Aspose.Cells完成easyUI中DataGrid数据的Excel导出功能
我准备在项目中实现该功能之前,google发现大部分代码都是利用一般处理程序HttpHandler实现的服务器端数据的Excel导出,但是这样存在的问题是ashx读取的数据一般都是数据库中视图的数据, ...
- 修改easyui中datagrid表头和数据不能分开对齐的BUG。
easyui的datagrid中表头和列只能同时全部向左对齐,全部向右对齐或者居中对齐. 有时候有需求,数据向左或向右,表头居中对齐. 在不修改源码的情况下.下面的代码可以实现该功能. 把下面代码放在 ...
- JQuery EasyUI的datagrid的使用方式总结
JQuery EasyUI的datagrid的使用方式总结第一步:添加样式和js脚本在前台添加展示数据表格的table元素 例如: <div> <table id="tt& ...
- Easyui的datagrid结合hibernate实现数据分页
最近在学习easyui的使用,在学到datagrid的时候遇到了一些问题,终于抽点时间整理了一下,分享出来,请各位前辈高手多多指教! 1.先来看看效果,二话不说,上图直观! 2.easyui的data ...
随机推荐
- HTTP状态码(响应码)
HTTP状态码(响应码)用来表明HTTP请求是否已经成功完成.HTTP响应类型一共分五大类:消息响应,成功响应,重定向,客户端错误,服务器端错误. 下表列出了所有HTTP状态码,以及他们各自所代表的含 ...
- 用int类型表示最大公倍数
代码 #include<stdio.h> #include<stdlib.h> #include<limits.h> int main(void) { int m, ...
- (原)android中的动画(二)
帧动画的使用需要在xml文件中指定每一帧所对应的图片 animation-list写法如下: <?xml version="1.0" encoding="utf-8 ...
- Android 中的消息传递，详解广播机制
--------------------------------------广播机制简介--------------------------------------------- Android中的广 ...
- windows添加linux 启动引导项
需要软件: EasyBCD 下载地址: http://pan.baidu.com/s/1c20v1GO 在windows 下安装上述软件. 然后打开,语言的话现在中文即可. 可以看到如下画面: 1.选 ...
- 2016年11月3日--Window.document对象
五.相关元素操作: var a = document.getElementById("id");找到a: var b = a.nextSibling,找a的下一个同辈元素,注意包含 ...
- Qt5 任务栏托盘功能实现
23333 有一阵子没写博客了,研究了挺长时间qt,学到任务栏托盘时简直无语,网上找得到的代码大多是废码,Qt5不支持或者本身就有毛病不能实现却被n多人转来转去的,甚是无语. 简单托盘功能以下在Qt5 ...
- Android架构：用消息机制获取网络数据
网络请求,不管是什么协议,是长连接还是短连接,总是一个异步的请求,过程包括:加请求参数->发起请求->接收响应->解析数据->获得业务数据. 最挫的做法是,业务代码包揽所有这些 ...
- 校赛E题递归形式
#include<stdio.h> #include<string.h> using namespace std; typedef long long ll; ][]; ,,, ...
- ubuntu安装skype
1.添加源 sudo add-apt-repository "deb http://archive.canonical.com/ $(lsb_release -sc) partner&quo ...