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 ...
随机推荐
- JavaScript 面向对象(一) —— 基础篇
学好JS的面向对象,能很大程度上提高代码的重用率,像jQuery,easyui等,这篇博客主要从细节上一步步讲JS中如何有效地创建对象,也可以看到常见的创建对象的方式,最后也会附上一些JS面向对象的案 ...
- phpize建立php扩展 Cannot find config.m4
centos php 安装 memcache 扩展的时候 爆 Cannot find config.m4 错误 解决方案参考以下文章 参考文章 http://blog.csdn.net/wgl ...
- React + Redux 入坑指南
Redux 原理 1. 单一数据源 all states ==>Store 随着组件的复杂度上升(包括交互逻辑和业务逻辑),数据来源逐渐混乱,导致组件内部数据调用十分复杂,会产生数据冗余或者混用 ...
- JavaScript 跨域小总结
一. 什么是跨域 域名分为:一级域名.二级域名.三级域名.例如:baidu.com(一级域名) .www.baidu.com(二级域名)tieba.baidu.com(二级域名).bbs.youa.b ...
- 初学js
接触时感觉跟前面写网页的差距和大,与c语言很相似.主要学的有: 1.引入js的三种方法:外联,内联,嵌套 2.标识符:第一个字符可以是任意Unicode字母,以及美元符号($)和下划线(_). - 第 ...
- MFC-01-Chapter01:Hello,MFC---1.2 MFC简介
1.2 MFC简介 MFC是Microsoft提供的放置Windows API的面向对象的包装的C++类库.MFC大约封装了好几百个类,其中有一些可以直接调用,有些类可以作为用户自己的类的基类.一些M ...
- Linux学习 ： 自己写bootloader
一.bootloader 目标:启动内核 基本功能: ①初始化硬件:关看门狗.设置时钟.设置SDRAM.初始化NAND FLASH ②image比较大需要重定位到SDRAM ②将内核从NAND FLA ...
- Python错误和异常学习
一:错误解释 1.语法错误:代码不符合解释器或者编译器语法 2.逻辑错误:不完整或者不合法输入或者计算出现问题 代码运行前的语法或者逻辑错误,语法错误在执行前修改,逻辑错误无法修改 二:异常 执行过程 ...
- VMware下利用ubuntu13.04建立嵌入式开发环境之五
tftp和nfs服务器配置 一.tftp服务器配置 1.安装软件包 1.1安装服务 apt-get install tftpd-hpa 1.2安装客户端 apt-get install tftp-hp ...
- web开发中常用的技术体系
HTML html(HyperText Markup Language)超文本标记语言"超文本"就是指页面内可以包含图片.链接.程序等非文字元素. 超文本标记语言的结构包括&q ...