您的位置：首页 > Web前端 > JQuery

JqueryEasyUI修改DataGrid使其支持多选框

2011-10-03 16:05 141 查看

最近研究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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： datagrid class function stylesheet div input

相关文章推荐

新的分享

章节导航