接上篇 ：EasyUI 开发笔记(一) (http://www.cnblogs.com/yiayi/p/3485258.html)
这期就简单介绍下, easyui 的 list 展示， 在easyui中叫datagrid, 其实就是html中，放个<table>然后用easyui 的datagrid 为其绑定数据。
界面如图这样:
aspx 页面代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<div style="border: 1px solid #ddd; margin-top: 4px;">
<div style="padding-top: 5px;">
<a href="javascript:void(0);" onclick="TabReload()" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-reload'"
style="float: left;">刷新</a>
<div class="tools_separator">
</div>
<a href="javascript:void(0);" onclick="addRole()" class="easyui-linkbutton"
data-options="plain:true,iconCls:'icon-z_add'" style="float: left;">新建角色</a>
<a href="javascript:void(0);" onclick="deleteRole()" class="easyui-linkbutton"
data-options="plain:true,iconCls:'icon-z_edit'" style="float: left;">删除</a>
<a href="javascript:void(0);" onclick="Edit()" class="easyui-linkbutton"
data-options="plain:true,iconCls:'icon-z_edit'" style="float: left;">编辑</a>
<a href="javascript:void(0);" onclick="fpqx()" class="easyui-linkbutton"
data-options="plain:true,iconCls:'icon-z_edit'" style="float: left;">分配权限</a>
<div style="clear: both;">
</div>
</div>
<div class="hr">
</div>
<div id="qx_RoleListWindow"></div> <table id="qx_roleList">
</table>
<script>
$(function () { $('#qx_roleList').datagrid({
url: '/admin/system/systemHandler.ashx?ajaxMethod=RoleList',
title: '角色管理', height: 'auto',
fitColumns: true,
singleSelect: true,
pagination: true,
rownumbers: true,
idField: "RoleId",
pageSize:,
pagePosition: 'both',
columns: [[
{ field: 'RoleId', title: '角色编号', width: },
{ field: 'RoleName', title: '角色名称', width: },
{ field: 'RoleDesc', title: '角色备注', width: } ]],
onDblClickRow: function (rowIndex, rowData) {
$('#qx_RoleListWindow').window({ width: , height: , collapsible: false, title: "编辑角色", minimizable: false, iconCls: 'icon-z_SysModule', maximizable: false, closable: true, modal: true, closed: false }).panel('refresh', '/admin/system/RoleEdit.aspx?RoleId=' + rowData.RoleId);
}
});
})
function addRole() {
$('#qx_RoleListWindow').window({ width: , height: , collapsible: false, title: "添加角色", minimizable: false, iconCls: 'icon-z_SysModule', maximizable: false, closable: true, modal: true, closed: false }).panel('refresh', '/admin/system/RoleEdit.aspx');
}
function deleteRole() {
var row = $('#qx_roleList').datagrid('getSelected');
if (row) {
$.messager.confirm("智能提示", "确定要删除该角色吗？", function (r) {
if (r) {
$.get("/admin/system/systemHandler.ashx?ajaxMethod=deleteRole&RoleId=" + row.RoleId, function (data) {
if(data=="true")
$('#qx_roleList').datagrid('load');
})
}
})
} else {
showException('请先选择数据行！');
}
}
function Edit() {
var row = $('#qx_roleList').datagrid('getSelected');
if (row) {
$('#qx_RoleListWindow').window({ width: , height: , collapsible: false, title: "编辑角色", minimizable: false, iconCls: 'icon-z_SysModule', maximizable: false, closable: true, modal: true, closed: false }).panel('refresh', '/admin/system/RoleEdit.aspx?RoleId=' + row.RoleId);
} else {
showException('请先选择数据行！');
}
}
function fpqx() {
var row = $('#qx_roleList').datagrid('getSelected');
if (row) {
$('#qx_RoleListWindow').window({left:,top:,width: , height: , collapsible: false, title: "分配权限", minimizable: false, iconCls: 'icon-z_SysModule', maximizable: false, closable: true, modal: true, closed: false }).panel('refresh', '/admin/system/PermissionSet.aspx?RoleId=' + row.RoleId);
} else {
showException('请先选择数据行！');
}
}
</script>
</div>
</body>
</html>
js方法大体就是，先为<table>绑定数据，对应的字段展示，然后为这个datagrid添加记录双击事件onDblClickRow，我这里的功能，就是双击弹出这个编辑角色的对话框。
addRole 也是弹出同样的对话框，来添加操作。deleteRole为删除操作。Edit()编辑对话框，fpqx()为分配权限功能，此处展示就不做说明了。
systemHandler.ashx 部分代码:
#region 获取角色列表
public void GetRoleList(HttpContext context)
{
UserRoleMgr bll = new UserRoleMgr();
List<UserRole> list = bll.GetList();
var pageindex = UrlHelper.GetFormValue("page", );
var pagesize = UrlHelper.GetFormValue("rows", );
int totalCount = list.Count;
list = list.Skip((pageindex - ) * pagesize).Take(pagesize).ToList();
var timeConverter = new Newtonsoft.Json.Converters.IsoDateTimeConverter
{
DateTimeFormat = "yyyy'-'MM'-'dd' 'HH':'mm':'ss"
};
var json = JsonConvert.SerializeObject(list, Formatting.Indented, timeConverter);
json = "{\"total\":" + totalCount.ToString() + ",\"rows\":" + json + "}";
context.Response.Write(json);
}
#endregion
GetRoleList
#region 删除角色
public void DeleteRole(HttpContext context)
{ string roleId = UrlHelper.GetPramaValue("RoleId", "");
UserRoleMgr bll = new UserRoleMgr();
int int_roleid=; if (int.TryParse(roleId, out int_roleid))
{
if (bll.Delete(int_roleid, null) > )
context.Response.Write("true");
else
context.Response.Write("false");
}
else
context.Response.Write("false"); }
#endregion
DeleteRole
RoleEdit.aspx 编辑对话框，部分代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table width="100%" border="" cellspacing="" cellpadding="" class="formTable" style="height: 100px">
<tr>
<td align="right">角色名称：</td>
<td align="left">
<asp:TextBox ID="txtRoleName" runat="server" /></td>
</tr>
<tr>
<td align="right">角色描述：</td>
<td align="left">
<asp:TextBox ID="txtRoleDesc" runat="server" />
<asp:HiddenField ID="h_RoleId" runat="server" />
</td>
</tr>
<tr>
<td colspan="" align="center">
<a href="javascript:void(0);" id="qx_role_save"
class="easyui-linkbutton" data-options="iconCls:'icon-ok'">保存</a>
</td>
</tr>
</table>
</div>
</form>
<script type="text/javascript">
$(function () {
$("#qx_role_save").click(function () {
var roleName = $.trim($("#txtRoleName").val());
var roleDesc = $.trim($("#txtRoleDesc").val()); if (roleName.length == ) {
$.messager.alert("提示", "请输入角色名称");
return false;
}
$.post("/admin/system/systemHandler.ashx?ajaxMethod=addRole",
{ roleName: roleName, RoleDesc: roleDesc, RoleId: $("#h_RoleId").val() },
function (data) {
if (data == "true") {
$.messager.alert("提示", "保存成功");
$('#qx_RoleListWindow').window('close');
$('#qx_roleList').datagrid('load');
} else if (data == "exist") {
$.messager.alert("提示", "该角色以存在，请不要重复添加");
} else {
$.messager.alert("提示", "保存失败");
}
});
});
});
</script>
</body>
</html>
#region 添加/编辑角色
public void AddRole(HttpContext context)
{
UserRoleMgr bll = new UserRoleMgr();
UserRole role = new UserRole();
role.IsLock = ;
role.CreateTime = DateTime.Now;
string roleid = UrlHelper.GetFormValue("RoleId", ""); var roleName = UrlHelper.GetFormValue("roleName", "");
var desc = UrlHelper.GetFormValue("RoleDesc", "");
role.RoleName=roleName;
role.RoleDesc = desc;
if (roleid.Trim().Length == )
{
if (!bll.ExistRole(roleName))
{
if (bll.Insert(role, null) > )
{
context.Response.Write("true");
}
}
else
{
context.Response.Write("exist");
}
}
else
{ role.RoleId = int.Parse(roleid);
if (bll.Update(role, null) > )
{
context.Response.Write("true");
}
}
}
#endregion
Add/Edit ashx code
这里偷懒了下，使用 aspx.cs 代码为<asp:textbox 赋值了。
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
UserRoleMgr bll = new UserRoleMgr();
string id = Request["RoleId"];
if(id!=null)
{
UserRole role= bll.GetModel(int.Parse(id));
h_RoleId.Value = id;
txtRoleName.Text = role.RoleName;
txtRoleDesc.Text = role.RoleDesc;
} }
}
RoleEdit.aspx.cs Page_Load
over，总体没啥东西，就绑定数据，然后修改 添加，就弹出页面，进行操作。在后面就是异步ashx请求，进行cs代码编写。
人不能懒，一懒就不愿意做事了，这笔记拖了一个月。。
【版权声明】转载请注明出处： http://www.cnblogs.com/yiayi/p/3526624.html