最近研究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" onclick="newItem('添加管理员','bll/adminuser.ashx?action=insert')">
- 添加</a> <a href="#" class="easyui-linkbutton" iconcls="icon-edit" plain="true" onclick="editItem('编辑管理员信息','bll/adminuser.ashx?action=update')">
- 编辑</a> <a href="#" class="easyui-linkbutton" iconcls="icon-remove" plain="true" onclick="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" onclick="saveItem()">保存</a>
- <a href="#" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">
- 取消</a>
- </div>
- </div>
- </div>
- </body>
- </html>