先上代码：前台代码
<!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> <link href="../ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" /> <script src="../js/jquery-1.5.2.min.js" type="text/javascript"></script> <script src="../ligerUI/json2.js" type="text/javascript"></script> <script src="../ligerUI/js/core/base.js" type="text/javascript"></script> <script src="../ligerUI/js/plugins/ligerForm.js" type="text/javascript"></script> <script src="../ligerUI/js/plugins/ligerDrag.js" type="text/javascript"></script> <script src="../ligerUI/js/plugins/ligerDialog.js" type="text/javascript"></script> <script src="../ligerUI/js/plugins/ligerTextBox.js" type="text/javascript"></script> <script src="../ligerUI/js/plugins/ligerCheckBox.js" type="text/javascript"></script> <script src="../ligerUI/js/plugins/ligerComboBox.js" type="text/javascript"></script> <script src="../ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script> <script src="../ligerUI/js/plugins/ligerDateEditor.js" type="text/javascript"></script> <script src="../ligerUI/js/plugins/ligerSpinner.js" type="text/javascript"></script> <script src="../ligerUI/js/plugins/ligerResizable.js" type="text/javascript"></script> <script src="../js/LG.js" type="text/javascript"></script> <script type="text/javascript"> var manager, g; var detailWin; $(function () { g = manager = $("#maingrid").ligerGrid({ //title : 'gg', columns: [ { display: 'ID编号', name: 'id', 50, type: 'int', frozen: true }, { display: '名字', name: 'Name', 100, editor: { type: 'text'} }, { display: '密码', name: 'Password', 260, type: 'text', editor: { type: 'text'} }, { display: '登录IP', name: 'Loginip', type: 'text', 100, editor: { type: 'text'} } ], // onSelectRow: function (data, rowindex, rowobj) { // $("#Name").html(data.Name); // $("#Password").html(data.Password); // }, dataAction: 'local', pageSize: 10, pageSizeOptions: [10, 20, 30], url: "ManagerData.ashx?action=managerlist", isScroll: false, // checkbox: true, rownumbers: true, '100%', heightDiff: -1, onRClickToSelect: true, onContextmenu: function (parm, e) { actionCustomerID = parm.data.id; menu.show({ top: e.pageY, left: e.pageX }); return false; } }); $("#maingrid").width($("#maingrid").width() - 16); $("#grid").height(document.documentElement.clientHeight - $(".toolbar").height()); //创建表单结构 $("#form2").ligerForm({ inputWidth: 170, labelWidth: 90, space: 40, validate: true, fields: [ { name: "id", newline: true, type: "hidden" }, { display: "用户名称", name: "UserName", newline: true, type: "text", validate: { required: true, minlength: 2} }, { display: "密 码", name: "Password1", newline: true, type: "text", validate: { required: true, minlength: 6} }, { display: "重复密码", name: "Password2", newline: true, type: "text", validate: { required: true, minlength: 6} } ] }); }); function Addadmin() { $('input[name="id"]').val(""); $('input[name="UserName"]').val(""); $('input[name="Password1"]').val(""); $('input[name="Password2"]').val(""); detailWin = $.ligerDialog.open({ height: 200, target: $("#form2"), null, height: 'auto', //showMax: true, //showToggle: true, //showMin: true, //isResize: true, modal: false, title: "新增", buttons: [ { text: '确定', onclick: function () { addNewRow(); detailWin.hide(); manager.loadData() } }, { text: '取消', onclick: function () { detailWin.hide(); } } ] }); } function beginEdit() { $('input[name="id"]').val(""); $('input[name="UserName"]').val(""); $('input[name="Password1"]').val(""); $('input[name="Password2"]').val(""); var row = manager.getSelectedRow(); if (!row) { alert('请选择行'); return; } detailWin = $.ligerDialog.open({ height: 200, target: $("#form2"), null, height: 'auto', modal: false, title: "新增", buttons: [ { text: '确定', onclick: function () { UpdateRow(); detailWin.hide(); manager.loadData() } }, { text: '取消', onclick: function () { detailWin.hide(); } } ] }); $('input[name="id"]').val(row.id); $('input[name="UserName"]').val(row.Name); $('input[name="Password1"]').val(row.Password); $('input[name="Password2"]').val(row.Password); } function deleteRow() { var row = manager.getSelectedRow(); if (!row) { alert('请选择行'); return; } $.ajax({ type: "get", url: 'ManagerData.ashx?action=delmanager', data: { id: row.id }, cache: false, async: false, success: function (result) { var obj_result = eval('(' + result + ')'); //返回信息 {'success':true} if (obj_result.success == true) { LG.showSuccess('删除管理员成功'); } else { LG.showError('删除失败！'); } } }); } function addNewRow() { if (liger.get("UserName").getValue() == "") { LG.tip('用户名不能为空？'); return; } if (liger.get("Password1").getValue() != liger.get("Password2").getValue()) { LG.tip('两次输入的密码不相等？'); return; } $.ajax({ type: "get", url: 'ManagerData.ashx?action=addmanager', data: { UserName: liger.get("UserName").getValue(), Password: liger.get("Password1").getValue() }, cache: false, async: false, success: function (result) { var obj_result = eval('(' + result + ')'); //返回信息 {'success':true} if (obj_result.success == true) { LG.showSuccess('管理员添加成功'); manager.loadData(); } else { LG.showError('添加失败！'); manager.loadData(); } } }); } function UpdateRow() { if ($("#id").val() == "") { LG.tip('编辑信息可能丢失？'); return; } if (liger.get("UserName").getValue() == "") { LG.tip('用户名不能为空？'); return; } if (liger.get("Password1").getValue() != liger.get("Password2").getValue()) { LG.tip('两次输入的密码不相等？'); return; } $.ajax({ type: "get", url: 'ManagerData.ashx?action=upmanager', data: { id: $("#id").val(), UserName: liger.get("UserName").getValue(), Password: liger.get("Password1").getValue() }, cache: false, async: false, success: function (result) { var obj_result = eval('(' + result + ')'); //返回信息 {'success':true} if (obj_result.success == true) { LG.showSuccess('管理员修改成功'); } else { LG.showError('修改失败！'); } } }); } </script> </head> <body> <a class="l-button" style=" 80px; float: left; margin-left: 6px;" onclick="beginEdit()">修改行</a> <a class="l-button" style=" 80px; float: left; margin-left: 6px;" onclick="deleteRow()">删除选择</a> <a class="l-button" style=" 100px; float: left; margin-left: 6px;" onclick="Addadmin()">添加行</a> <br /> <br /> <div id="grid"> <div id="maingrid"> </div> </div> <form id="form2" style="display: none"> </form> </body> </html>
后台代码：
using System; using System.Web; using Newtonsoft.Json; using System.Data; public class ManagerData : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string action = context.Request.Params["action"]; //获取管理员列表 if (action == "managerlist") { DataTable table = new DataTable(); string sql = "select * from A_Admin where 1=1 "; if (ISDatabase.SelectDatebase() == 1) table = DbHelp.DataTableSql(sql); else table = DbHelperOleDb.DataTableSql(sql); string ResJsonStr = "{ "Rows": "; if (table.Rows.Count > 0) { Newtonsoft.Json.Converters.IsoDateTimeConverter timeConverter = new Newtonsoft.Json.Converters.IsoDateTimeConverter(); timeConverter.DateTimeFormat = "yyyy'-'MM'-'dd"; ResJsonStr = ResJsonStr + JsonConvert.SerializeObject(table, Formatting.Indented, timeConverter) + ", "Total": " + table.Rows.Count + " }"; } context.Response.Write(ResJsonStr); } //添加管理员 if (action == "addmanager") { string UserName = context.Request.Params["UserName"]; string Password = context.Request.Params["Password"]; string StrIP=PubliclClass.getIp(); int result; string sql = "insert into A_Admin(Name,Password,Loginip) values('" + UserName + "','" + Password + "','" + StrIP + "') "; if (ISDatabase.SelectDatebase() == 1) result = DbHelp.ExecuteSql(sql); else result = DbHelperOleDb.ExecuteSql(sql); if (result > 0) { context.Response.Write("{"success":true}"); } else { context.Response.Write("{"success":false}"); } } //更新管理员 if (action == "upmanager") { string id = context.Request.Params["id"]; string UserName = context.Request.Params["UserName"]; string Password = context.Request.Params["Password"]; string StrIP = PubliclClass.getIp(); int result; string sql = "update A_Admin set Name='" + UserName + "',Password='" + Password + "',Loginip='" + StrIP + "' where id=" + id + " "; if (ISDatabase.SelectDatebase() == 1) result = DbHelp.ExecuteSql(sql); else result = DbHelperOleDb.ExecuteSql(sql); if (result > 0) { context.Response.Write("{"success":true}"); } else { context.Response.Write("{"success":false}"); } } //删除管理员 if (action == "delmanager") { string id = context.Request.Params["id"]; int result; string sql = "delete A_Admin where id=" + id + " "; if (ISDatabase.SelectDatebase() == 1) result = DbHelp.ExecuteSql(sql); else result = DbHelperOleDb.ExecuteSql(sql); if (result > 0) { context.Response.Write("{"success":true}"); } else { context.Response.Write("{"success":false}"); } } } public bool IsReusable { get { return false; } } }
现在网上的前台框架越来越多，大多都基于jQuery的，不得不说jquery的出现给大家带来很多好处。随jquery的前台框架也很多有的简单有的复杂，用了ligerUi的人都会感觉到他们的文档很少，没有帮助文档说明用起来就很费劲。对于初学者还是考虑用easyui吧！比较人家文档很丰富，而且官方例子也很明了。