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 ...
随机推荐
- 搭建Hadoop2.5.2+Eclipse开发调试环境
一.简介 为了开发调试方便,本文介绍在Eclipse下搭建开发环境,连接和提交任务到Hadoop集群. 二.安装前准备: 1)Eclipse:Luna 4.4.1 2)eclipse插件:hadoop ...
- MySQL 性能优化 30个数据库设计的最佳实践
数据库设计是整个程序的重点之一,为了支持相关程序运行,最佳的数据库设计往往不可能一蹴而就,只能反复探寻并逐步求精,这是一个复杂的过程,也是规划和结构化数据库中的数据对象以及这些数据对象之间关系的过程. ...
- 学习winform第三方界面weiFenLuo.winFormsUI.Docking.dll
控件dockpanel中提供了几个可用的类, 重要的有两个, 一是DockPanel, 一是DockContent, DockPanel是从panel继承出来的, 用于提供可浮动的dock的子窗口进行 ...
- spark 1.5.2配置记录
1)slaves # A Spark Worker will be started on each of the machines listed below. dataNode 2)spark-env ...
- PHPCMS后台登陆路径修改方法（V9版）
转自:http://hi.baidu.com/geek_cheng/item/b903ebe7b4ac3af9e0a5d4aa?qq-pf-to=pcqq.c2c 最新发布的PHPCMS V9由于采用 ...
- usb端口号绑定
由于ubuntu USB设备号为从零开始依次累加,所以多个设备每次开机后设备号不固定,机器人每次开机都要蛋疼的按顺序插, 在网上找到一种方法:udev的规则 udev的规则说明,可以参考博客说明:ht ...
- Android studio 提示：Can't use Subversion command line client: svn Probably the path to Subversion executable is wrong. Fix it.
1.参考来源:http://my.oschina.net/fyyy/blog/519353 按照下图,svn相关选项不要选.
- 支付宝APP支付后台参数生成Java版（一）
一.支付参数组装: String[] parameters={ "service=\"mobile.securitypay.pay\"",//固定值 " ...
- [转]SPICE仿真软件基础(整理)
现在常用的SPICE仿真软件为方便用户使用都提供了较好的用户界面,在用仿真库中的元器件连成原理图后就可以进行仿真(当然要设置必要的仿真参数),但实际上只是用原理图自动产生了SPICE的格式语句,还是要 ...
- latex使用问题总结1
文献引用问题 若使用了\usepackage[super, square, number, sort&compress]{natbib},\cite的文献并不与文本平行,反而位于右上角 文献引 ...