先上代碼：前台代碼
<!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', width: 50, type: 'int', frozen: true },
{ display: '名字', name: 'Name', width: 100, editor: { type: 'text'} },
{ display: '密碼', name: 'Password', width: 260, type: 'text', editor: { type: 'text'} },
{ display: '登錄IP', name: 'Loginip', type: 'text', width: 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,
width: '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"),
width: 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"),
width: 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" onclick="beginEdit()">修改行</a>
<a class="l-button" onclick="deleteRow()">刪除選擇</a>
<a class="l-button" onclick="Addadmin()">添加行</a>
<br />
<br />
<div id="grid">
<div id="maingrid">
</div>
</div>
<form id="form2" >
</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吧！比較人家文檔很豐富，而且官方例子也很明了。
