EasyUI 开发笔记(二)
接上篇 ：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
EasyUI 开发笔记(二)的更多相关文章
- Django开发笔记二
Django开发笔记一 Django开发笔记二 Django开发笔记三 Django开发笔记四 Django开发笔记五 Django开发笔记六 1.xadmin添加主题.修改标题页脚和收起左侧菜单 # ...
- EasyUI 开发笔记(一)
由于某些原因,在公司做的后台需要改成类似于Ext.js 形式的后台,主要看好其中的 框架布局,以及tab开页面和弹出式内部窗体. 后来看看,改成EasyUI,较Ext.js 库小很多,也便于公司的初级 ...
- SDL开发笔记(二)：音频基础介绍、使用SDL播放音频
若该文为原创文章,未经允许不得转载原博主博客地址:https://blog.csdn.net/qq21497936原博主博客导航:https://blog.csdn.net/qq21497936/ar ...
- Vue-cli开发笔记二----------接口调用、配置全局变量
我做的一个项目,本身是没用任何框架,纯手写的前端及数据交互,项目已经完结.最近学Vue,于是借用这个项目,改装成vue项目. (一)接口问题:使用axios的调用方法,proxyTable解决开发环境 ...
- RBL开发笔记二
17:13:55 2014-08-25 有以下几个点: 第一 :怎么在预处理阶段能够做到识别某个宏是否给定义了 这里就定义了一个SystemConfig.h 专门做这个事情 当然是需要make ...
- easyUI学习笔记二
1． 拖拉大小 <!DOCTYPE html> <html> <head> <title>easyui学习</title> <scr ...
- openwrt开发笔记二：树莓派刷openwrt
前言及准备 本笔记适用于第一次给树莓派刷openwrt系统的玩家,对刷机过程及注意事项进行了记录,刷机之后对openwrt进行一些简单配置. 使用openwrt源码制作固件需要花费一点时间. 平台环境 ...
- Django开发笔记六
Django开发笔记一 Django开发笔记二 Django开发笔记三 Django开发笔记四 Django开发笔记五 Django开发笔记六 1.登录功能完善 登录成功应该是重定向到首页,而不是转发 ...
- Django开发笔记五
Django开发笔记一 Django开发笔记二 Django开发笔记三 Django开发笔记四 Django开发笔记五 Django开发笔记六 1.页面继承 定义base.html: <!DOC ...
随机推荐
- python【5】-生成式，生成器
一.条件和循环 1. if语句 if <条件判断1>: <执行1> elif <条件判断2>: <执行2> else: <执行4> 例如: ...
- Android开发--TableLayout的应用
1.简介 TableLayout为表格框架结构
- Getting Started with JD Edwards EnterpriseOne Interoperability
Overview Every enterprise holds a forest of branched system spread across a number of business uni ...
- JavaScript中常用语句
1.document.write( " "); 输出语句 2.JS中的行注释为:// 块注释:/**/ 3.传统的HTML文档顺序是:document- >html- > ...
- <button>标签与<input type="button">标签
<script type="text/javascript" src="/jquery-1.11.3.min.js"></script> ...
- UIPIckerView现实城市选择
实现城市选择,选中省时,后来自动显示相对应的城市,并且下面会打印出来对应的省和城市 . 因为plist里面是一个一个的字典. 1.字典转模型 HMCities.h #import <Founda ...
- solution to E: failed to fetch .......
There are some issues today for me that my desktop can't boot as I expected, I installed windows 8.1 ...
- NOIP 2015 游记
本来和zly和wxh约好了 高三一起再来玩一次复赛,结果最终只有我一个人来了说...貌似是年段主任不让去...总算见识了比我们学校的YSD更爱管闲事的年段主任. 今年比赛竟然在衢州二中,学校不大,但感 ...
- 给vs2010换皮肤
http://www.cnblogs.com/aolinwxfx/articles/2379252.html O(∩_∩)O哈哈~,很不错哦
- Bootstrap <基础三十二>模态框（Modal）插件
模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用 ...