最近研究JqueryEasyUI插件,用它的DataGrid來實現管理員權限管理的功能,但是在權限設置的時候用它提供的ComboBox發現有個BUG,那就是在點編輯的載入數據的時候莫名其妙的多了兩個",," 乾脆就自己用checkbox寫個權限管理功能出來吧.
首先我有一個權限表power:
然後建一個服務端文件,來返回power表的數據(JSON格式),如下圖:
最後再htm頁面添加JqueryEasyUI的DataGrid控件,在頁面載入時就加載所有的checkbox(從服務器獲取數據),然後在editItem()事件裏載入當前權限,
<!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>
<title></title>
<link href="css/jiangsCMS.css" rel="stylesheet" type="text/css" />
<link href="jquery-easyui-1.2.4/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="jquery-easyui-1.2.4/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="jquery-easyui-1.2.4/jquery-1.6.min.js" type="text/javascript"></script>
<script src="jquery-easyui-1.2.4/jquery.easyui.min.js" type="text/javascript"></script>
<script src="js/jiangsCMS.js" type="text/javascript"></script>
<script type="text/javascript">
function formatDisplay(val, row) { //格式化顯示/隱藏
if (val == "True") {
return '啓用';
} else {
return '<span style="color:gray;">屏蔽</span>';
}
}
function newItem(title, link) {//添加,title=標題,link=提交的頁面
$('#dlg').dialog('open').dialog('setTitle', title);
$('#fm').form('clear');
url = link;
}
function editItem(title, link) {
var row = $('#dg').datagrid('getSelected');
if (row) {
$('#dlg').dialog('open').dialog('setTitle', title);
$('#fm').form('load', row);
url = link + '&id=' + row.id;
initpower(row);//編輯的時候加載power的checkbox選中項
}
}
function saveItem() {
$('#fm').form('submit', {
url: url,
onSubmit: function () {
return $(this).form('validate');
},
success: function (result) {
var result = result.split('|'); //獲取返回結果
if (result[0] == "1") {
$('#dlg').dialog('close'); // close the dialog
$('#dg').datagrid('reload'); // reload the user data
} else {
$.messager.show({
title: '提示',
msg: result[1]
});
}
}
});
}
function removeItem(link) {
var row = $('#dg').datagrid('getSelected');
if (row) {
$.messager.confirm('提示', '確定刪除這條數據?', function (r) {
if (r) {
$.post(link, { "id": row.id, "action": "delete" }, function (result) {
var result = result.split('|');
if (result[0] == "1") {
$('#dg').datagrid('reload'); // reload the user data
} else {
$.messager.show({ // show error message
title: '提示',
msg: result[1]
});
}
});
}
});
}
}
//初始化order只允許輸入0-999數字
function initOrder() {
$('input[name=order]').numberbox({
min: 0,
max: 999,
precision: 0
});
}
function initpower(row) {//編輯的時候加載power的checkbox選中項
var temp = row.power.split(',');
for (var i = 0; i < temp.length; i++) {
$("#_" + temp[i]).attr("checked", "checked");
}
}
function loadpower() {//頁面初始化加載power的checkbox
$.post("bll/adminpower.ashx", function (data, status) {
if (status == "success") {
var powers = $.parseJSON(data);
var sp1 = $("#span1");
for (var i = 0; i < powers.length; i++) {
power = powers[i];
var checkbox = $("<input id=_" + power.id + " type='checkbox' name='power' value=" + power.id + " /><label for=_" + power.id + ">" + power.item + "</label>");
if ((i + 1) % 4 == 0) {
checkbox = $("<input id=_" + power.id + " type='checkbox' name='power' value=" + power.id + " /><label for=_" + power.id + ">" + power.item + "</label><br />");
}
sp1.append(checkbox);
}
}
});
}
$(function () {
initOrder();
loadpower();
});
</script>
</head>
<body class="mainframebody">
<div class="mainframebox">
<div class="mainframetitle">
網站管理員設置</div>
<div class="mainframecontent">
<table id="dg" class="easyui-datagrid" style="width: 800px; height: 350px;" url="bll/adminuser.ashx?action=select"
singleselect="true" title="網站管理員" iconcls="icon-save" toolbar="#toolbar" rownumbers="false"
pagination="true">
<thead>
<tr>
<th field="id" width="80" sortable="true">
編號ID
</th>
<th field="userName" width="120">
用戶名
</th>
<th field="passWord" width="120">
密碼
</th>
<th field="effect" width="80" formatter="formatDisplay">
是否生效
</th>
<th field="power" width="160">
權限
</th>
<th field="comment" width="200">
備註
</th>
</tr>
</thead>
</table>
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconcls="icon-add" plain="true" οnclick="newItem('添加管理員','bll/adminuser.ashx?action=insert')">
添加</a> <a href="#" class="easyui-linkbutton" iconcls="icon-edit" plain="true" οnclick="editItem('編輯管理員信息','bll/adminuser.ashx?action=update')">
編輯</a> <a href="#" class="easyui-linkbutton" iconcls="icon-remove" plain="true" οnclick="removeItem('bll/adminuser.ashx')">
刪除</a>
</div>
<div id="dlg" class="easyui-dialog" style="width: 620px; height: 400px; padding: 10px 20px"
closed="true" buttons="#dlg-buttons">
<div class="ftitle">
網站管理員設置</div>
<form id="fm" method="post">
<div class="fitem">
<label class="description">
用戶名:</label>
<input name="userName" class="easyui-validatebox" required="true" />
</div>
<div class="fitem">
<label class="description">
密碼:</label>
<input name="passWord" class="easyui-validatebox" required="true" />
</div>
<div class="fitem">
<label class="description">
是否生效:</label>
<input name="effect" type="radio" value="True" />啓用
<input name="effect" type="radio" value="False" />屏蔽
</div>
<div class="fitem">
<label class="description">
權限:</label>
<span id="span1" style="display: inline-block;"></span>
</div>
<div class="fitem">
<label class="description">
備註:</label>
<textarea rows="3" name="comment" style="width: 350px;" class="easyui-validatebox"></textarea>
</div>
</form>
</div>
<div id="dlg-buttons">
<a href="#" class="easyui-linkbutton" iconcls="icon-ok" οnclick="saveItem()">保存</a>
<a href="#" class="easyui-linkbutton" iconcls="icon-cancel" οnclick="javascript:$('#dlg').dialog('close')">
取消</a>
</div>
</div>
</div>
</body>
</html>
