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 ...
随机推荐
- 微软“One Windows”的梦想已经破灭了吗？
导读 Windows 10 正式公布的时候,微软曾表示该系统将开启更为个性化的计算新纪元,可让用户在使用各类设备处理各项事务时,享受到一致.熟悉和可兼容的体验,从 Xbox 到 PC 和手机,再到平板 ...
- 我对自己提的几个关于cocos2dx的几个问题
1.友元函数的定义: 2.运算符重载: 3.内存关机机制: 4.动作侦听: 5.单点触摸: 6.触摸目标判断: 7.事件传递: 8.多点触摸: 9.加速传感器: 10.物理按键交互: 11.绘图API ...
- u-boot 2011.09 调用kernel 的流程
这段时候我总是觉得有个问题,u-boot 的存在是不是就是为了调用kernel 而存在的. 所以,粗浅的跟了一下这个流程,还有很多细节上的东西没有做好,往指正. u-boot-2011.9 调用内核代 ...
- linux kernel 杂谈
首先介绍一下背景吧,工作三个星期了．复习了一波u-boot,跟了一下事件上报,搞了下平台设备,扣了一个内存检查代码． 想想生活是不是有点无聊．对啊,真的很无聊!!!! 无聊也没有办法啊,所以找点方法去 ...
- Android_bug之Default Activity not found
在运行自己修改默认的MainActivety,运行自己的Mainactivety时,碰到这个问题Could not identify launch activity: Default Activity ...
- Java读写文件通用格式
String path = "I:\\"; File file = new File(path + "user_id_pair.txt"); FileReade ...
- Adapter
11-25 16:09:10.965 22791-22823/myapplication.com.myblue E/HAL: hw_get_module_by_class: lib loaded: / ...
- Google Code Jam 2015 R1C B
题意:给出一个键盘,按键都是大写字母.给出一个目标单词和一个长度L.最大值或者最大长度都是100.现在随机按键盘,每个按键的概率相同. 敲击出一个长度为L的序列.求该序列中目标单词最多可能出现几次,期 ...
- Unity3d 枚举某个目录下所有资源
using UnityEngine; using System.Collections; using UnityEditor; using System.Collections.Generic; us ...
- C++中using的作用
[转自] http://www.cnblogs.com/yuaqua/archive/2011/10/22/2219991.html 1.在当前文件中引入命名空间 这是我们最熟悉的用法,例如:usin ...