easyui网站模板

发布时间:2016-12-15 来源: 模板 点击:

篇一:使用Jquery+EasyUI 进行框架项目开发案例讲解之二用户管理源码分享

在上一篇文章《使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享》我们分享了使用Jquery EasyUI来进行开发的相关方法,同时对入群的用户提供了使用Jquery EasyUI开发的框架案例提供了测试地址进行在线测试,文章发表后得到了非常多的反馈,对后期版本的改进提供了很好的帮助,在此感谢!整个文章皆在说明如何使用RIDFramework.NET进行管理类信息系统的开发,EasyUI也只是做个界面,业务核心都是调用的框架的核心接口。

通过上一篇文章,我们讲解了如何使用EasyUI中的tree、datagrid、linkbutton等常用UI组件、组件的特殊应用方法、数据加载技巧等等。

这一篇文章我们来分享一下使用EasyUI开发的用户管理模块的核心代码,用户管理模块主要是对可登录系统的用户进行管理。后续的工作如:用户归属角色、权限的分配、用户所拥有的相应功能模块、各业务系统权限的分配等都是以此为基础。用户管理的主要操作有:新增用户、修改用户、删除用户、设置用户的默认角色、设置用户密码、设置用户的有效性、用户排序等。在用户管理主界面,有用户管理相应操作权限的登录用户可以添加、修改、删除(单个或批量删除)、设置密码、查询用户。此模块一般分配给具有系统管理员角色的用户,以防误操作,超级管理员用户不允许被修改与删除。当然,对于框架核心数据删除操作都是逻辑删除而非物理删除。即删除是在相应记录上打上了删除标志。若要恢复误删的数据,可以联系具有操作数据库的用户(如:DBA)进行数据恢复。用户管理的主界面如下图所示:

首先是用户管理的UI界面aspx代码如下:

<%@ Page Language="C#" MasterPageFile="~/Site.Master"

AutoEventWireup="true"CodeBehind="UserAdmin.aspx.cs"

Inherits="RDIFramework.WebApp.Modules.UserAdmin" %>

<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">

<script src="../Scripts/jquery-checkbox.js" type="text/javascript"></script><script src="../Scripts/date.js" type="text/javascript"></script>

<script src="../Scripts/jquery-checkbox.js" type="text/javascript"></script> <script src="../Scripts/jQuery.Select.js" type="text/javascript"></script> <script src="../Scripts/jquery.easyListSplitter.js"

type="text/javascript"></script>

<script src="../Scripts/Business/UserAdmin.js" type="text/javascript"></script>

<script src="../Scripts/easyui/plugins/jquery.linkbutton.js" type="text/javascript" />

</asp:Content>

<asp:Content ID="Content1" runat="server"

contentplaceholderid="ContentPlaceHolder1">

<div class="toolbar"><%=base.BuildToolBarButtons() %></div>

<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table><div id="w"></div>

<div id="d"></div>

<script type="text/javascript">

var curUserinfo = { "id": <%=base.UserInfo.Id %>, "name": '<%=base.UserInfo.RealName %>', "username":

'<%=base.UserInfo.UserName %>' };

var varPermission = { "varPermissionAdd": '<%=permissionAdd %>', "varPermissionEdit": '<%=permissionEdit %>', "varPermissionDelete":

'<%=permissionDelete %>' };

$(function () {

$('#a1').linkbutton('disable');

});

</script>

</asp:Content>

绑定当前登录用户所拥有的功能按钮列表代码如下:

/// <summary>

/// 获得权限

/// </summary>

private void GetPermission()

{

this.permissionAdd = this.IsAuthorized("UserManagement.Add");

this.permissionEdit = this.IsAuthorized("UserManagement.Edit");

this.permissionSetPassword =

this.IsAuthorized("UserManagement.SetUserPassword");

this.permissionDelete = this.IsAuthorized("UserManagement.Delete"); }

/// <summary>

/// 绑定页面功能按钮列表

/// </summary>

public

override string BuildToolBarButtons()

{

StringBuilder sb = new StringBuilder();

string linkbtn_template = "<a id=\"a_{0}\" class=\"easyui-linkbutton\" style=\"float:left\" plain=\"true\" href=\"javascript:;\" icon=\"{1}\" {2} title=\"{3}\">{4}</a>";

sb.Append("<a id=\"a_refresh\" class=\"easyui-linkbutton\" style=\"float:left\" plain=\"true\" href=\"javascript:;\" icon=\"icon-reload\" title=\"重新加载\">刷新</a> ");

sb.Append("<div class='datagrid-btn-separator'></div> ");

sb.Append(string.Format(linkbtn_template, "add", "icon-user_add",

permissionAdd ? "" : "disabled=\"True\"", "添加用户", "添加"));

sb.Append(string.Format(linkbtn_template, "edit", "icon-user_edit", permissionEdit ? "" : "disabled=\"True\"", "修改用户", "修改"));

sb.Append(string.Format(linkbtn_template, "delete", "icon-user_delete", permissionDelete ? "" : "disabled=\"True\"", "删除用户", "删除"));

sb.Append("<div class='datagrid-btn-separator'></div> ");

sb.Append(string.Format(linkbtn_template, "editpassword", "icon-user_key", permissionSetPassword ? "" : "disabled=\"True\"", "设置选中用户密码", "设置密码"));

sb.Append("<div class='datagrid-btn-separator'></div> ");

sb.Append(string.Format(linkbtn_template, "export", "icon-user_go", permissionExport ? "" : "disabled=\"True\"", "导出用户数据", "导出")); return sb.ToString();

}

核心业务逻辑完整JS代码如下:

1 $(function () {

2 grid.bind();

3 AddUser(); //添加用户

4 EditUser(); //编辑用户

5 DeleteUser(); //删除用户

6 SetUserPassword(); //设置用户密码

7 $('#a_refresh').click(function () {

8$('#list').datagrid('reload');

9 });

10

11 });

12

13 /* 方法一绑定数据

14 var initList = function () {

15 var winSize = { width: $(window).width() - 4, height: $(window).height() - 40 };

16 $('#list').datagrid({

17url: "handler/UserAdminHandler.ashx",

18title: "系统用户列表",

19iconCls: 'icon icon-list',

20width: winSize.width,

21height: winSize.height,

22nowrap: false, //折行

23rownumbers: true, //行号

24striped: true, //隔行变色

25idField: 'Id', //主键

26singleSelect: true, //单选

27checkOnSelect: true,

28frozenColumns: [[]],

29columns: [[

30 { title: '主键', field: 'Id', hidden: true },

31 { title: '编号', field: 'Code', width: 150 },

32 { title: '登录名', field: 'UserName', width: 150, sortable: true }, 33 { title: '用户名', field: 'RealName', width: 150 },

34 { title: '部门', field: 'DepartmentName', width: 150 }, 35 { title: '角色主键', field: 'RoleId', hidden: true },

36 { title: '有效', field: 'Enabled', width: 50, formatter:

imgcheckbox },

37 { title: '邮箱地址', field: 'Email', width: 150 },

38 { title: '手机号码', field: 'Mobile', width: 150 },

39 { title: '描述', field: 'Description', width: 200 }

40]]

41 });

42 }

43 */

44

45 var grid = {

46 bind: function () {

47var winSize = { width: $(window).width() - 4, height:

$(window).height() - 40 };

48$('#list').datagrid({

49 url: "handler/UserAdminHandler.ashx",

50 title: "系统用户列表",

51 iconCls: 'icon icon-list',

52 width: winSize.width,

53 height: winSize.height,

54 nowrap: true, //false:折行

55 rownumbers: true, //行号

篇二:jqueryeaysui datagrid自己封装js实现源码

Jqueryeasyui自己封装的js

function createTable(tableId,rows) {

$('#'+tableId).datagrid({loadFilter :

pagerFilter}).datagrid('loadData', rows);

}

function pagerFilter(data) {

if (typeof data.length == 'number' && typeof data.splice == 'function') {

data = {

total : data.length,

rows : data

}

var dg = $(this);

var opts = dg.datagrid('options');

var pager = dg.datagrid('getPager');

pager.pagination({

onSelectPage : function(pageNum, pageSize) { opts.pageNumber = pageNum;

opts.pageSize = pageSize;

pager.pagination('refresh', {

pageNumber : pageNum,

pageSize : pageSize

});

dg.datagrid('loadData', data);

}

});

if (!data.originalRows) {

data.originalRows = (data.rows);

}

var start = (opts.pageNumber - 1) *

parseInt(opts.pageSize);

var end = start + parseInt(opts.pageSize);

data.rows = (data.originalRows.slice(start, end));return data;

}

Java类

/**

* 查询

* @return

* @throws Exception

*/

public String showAdminList() throws Exception{//构造json对象

new JSONObject();JSONArray oldjyjson = new JSONArray();db=new DBUtil();

db.getConn();

String sql1="select username,

address,email,mobile from tb_customer ";rs=db.select(sql1);

new

ArrayList<Customer>();

try {

while(rs.next()){

JSONObject re = new JSONObject(); Customer u = new Customer();

u.setUsername( rs.getString("username"));

u.setAddress( rs.getString("address"));

u.setMobile( rs.getString("mobile")); u.setEmail( rs.getString("email"));

oldjyjson.add(jo);

}

} catch (SQLException e) {

e.printStackTrace();

}finally{

db.close();

}

HttpServletRequest request =

ServletActionContext.getRequest();

request.setAttribute("list",

oldjyjson.toArray());

request.setAttribute("result",

oldjyjson.toString());

return ADLIST;//返回后台管理页面

}

页面

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<%@page import="java.util.*"%>

<%@page import="com.lyq.model.user.Customer"%> <%@include

file="/WEB-INF/pages/common/common_admin.jsp"%> <script type="text/javascript"

src="/Shop/jqueryeasyui/jquery-1.9.1.js"></script> <script type="text/javascript"

src="/Shop/jqueryeasyui/jquery.easyui.min.js"></script>

<script type="text/javascript"

src="/Shop/jqueryeasyui/easyui.js"></script> <link rel="stylesheet" type="text/css"

href="/Shop/jqueryeasyui/themes/gray/easyui.css"> <link rel="stylesheet" type="text/css"

href="/Shop/jqueryeasyui/themes/icon.css">

<%

Object[] list=(Object[])request.getAttribute("lis

easyui网站模板

t"); String listt=(String)request.getAttribute("result"); %>

篇三:jquery_easyui_DataGrid开发经验

最近,在项目中用到JQuery EasyUI DataGrid,虽然它封装了表格的实现,为我们提供很多便利,但是在使用的过程中,还是会遇到一些困难和问题。目前,问题都已经解决,特分享我使用DataGrid开发的经验。(PS:我用的是JSP和J2EE框架开发)。

1.数据的提取和显示。

DataGrid是通过url属性获取数据的。例如:url:'ListInfo.action',这样通过调用Action中的方法获取数据。返回的是JSON字串。注意,JSON字串必须按照DataGrid定义的数据格式进行拼装。这种数据格式,可以参考我前面的文章中的附件。特别强调的是,JSON字串中的total域的值是数据的条数,用于数据的分页。

2.数据的分页。

数据的分页分为前台分页和后台分页,前台分页,DataGrid已经封装好了。DataGrid定义了两个参数: rows(每页的条数),page(当前的页数),这两个参数分别对应属性pageSize,pageNumber。用户可以在pageSize,pageNumber属性中设置,也可以不设置,这样就取默认值。我们只需在Action中定义两个变量,private int rows; private int page; 接着通过SQL语句获取需要取的值。分页的SQL语句(Oracle)如下:

1. select * from(

2. select rownum r, field1,field2 from table_name where rownum <= pag

e* rows(

3. )

4. where r > (page-1) * rows

这样提取的数据的条数赋值给total域,拼装在JSON字串中返回,就可以实现分页了。当然,pagination:true,是当然需要的。

3.数据的操作。

数据的操作大致可分为:查看,删除。对于查看,我们可以通过onClickRow或onDblClickRow事件实现。如:

$(function(){

$('#test').datagrid({

title:'数据列表',

width:900,

height:500,

.......(省略的属性)

onDblClickRow: function() {

var selected = $('#test').datagrid('getSelected');

if (selected){

window.open("DataView.action?Id="+selected.ID);

}} 这样双击就可以查看了。

关于删除,可以通过点击删除按钮,调用删除方法来实现。删除按钮可以在拼装JSON字串的时候,赋值给OPERATION域,这样设置{field:'OPERATION',title:'操作',width:120},就可以在页面上显示删除按钮了。删除的实现,如下:

function DelAff(){

$.messager.confirm('确认','是否真的删除?',function(r){

if (r){

var selected = $('#test').datagrid('getSelected');

if (selected){

var index = $('#test').datagrid('getRowIndex', selected);

$('#test').datagrid('deleteRow', index);

DeleteSubmit(selected);

}

}

});

}

function DeleteSubmit(selected)

{

var url="DataDelete.action?Id="+selected.ID;

$.post(

url

);

}这样页面的删除和数据库中的删除都实现了。

4.待解决的问题

如果返回的数据为空,则在IE浏览器下,页面会有Bug。我的解决办法是,把每个域设为"",这样在页面上就会出现一行空内容的数据。如果遇到这个问题并解决的朋友,可以给我建议。

相关热词搜索:模板 网站 easyui easyui模板下载 easyui后台框架模板 jquery easyui

版权所有 小龙文挡网 www.xltkwj.com