生成树形选项

时间：2016-03-04 00:15:23 阅读：237 评论：0 收藏：0 [点我收藏+]

标签：

@{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>index_default</title>
<link href="~/Areas/Admin/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/Areas/Admin/css/bootstrap-table.css" rel="stylesheet" />
<link href="~/Areas/Admin/bootstrapTreeView/css/bootstrap-treeview.css" rel="stylesheet" />
<link href="~/Areas/Admin/css/styles.css" rel="stylesheet" />
<link href="~/Areas/Admin/css/ui-dialog.css" rel="stylesheet" />
<script src="~/Areas/Admin/js/jquery-1.11.1.min.js"></script>
<script src="~/Areas/Admin/js/bootstrap.min.js"></script>
<script src="~/Areas/Admin/js/bootstrap-table.js"></script>
@*<script src="~/Areas/Admin/js/bootstrap-table-zh-CN.js"></script>*@
<script src="~/Areas/Admin/js/dialog-min.js"></script>
<script src="~/Areas/Admin/bootstrapTreeView/js/bootstrap-treeview.js"></script>
</head>
<body>

</div>
<table data-toggle="table" id="table" data-toolbar="#toolbar" data-url="/Admin/System/GetRoleList" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-pagination="true" data-sort-name="name" data-sort-order="desc">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="ID" hidden="hidden" data-visible="false">ID</th>
<th data-field="Name" data-sortable="true" class="col-sm-4">名称</th>
@*<th data-field="PrivilegeID" data-sortable="true">权限</th>*@
<th data-field="Note" data-sortable="true" class="col-sm-4">备注</th>
<th data-field="Operation" data-formatter="actionFormatter" data-events="actionEvents" class="col-sm-4">操作</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>

<div class="modal fade" id="saveModal" tabindex="-1" role="dialog" aria-labelledby="saveModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">新增</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label for="Name" class="col-sm-2 control-label">名称</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="Name" placeholder="名称" name="Name">
</div>
</div>
<div class="form-group">
@*<label for="PrivilegeID" class="col-sm-2 control-label">权限</label>*@
<div class="col-sm-10">
@* <select id="PrivilegeID" name="PrivilegeID" class="form-control">*@
@*<option value="1">超级管理员</option>
<option value="2">文章管理员</option>
<option value="3">论坛管理员</option>*@
@*</select>*@
</div>
</div>
<div class="form-group">
<label for="Note" class="col-sm-2 control-label">备注</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="Note" id="Note" placeholder="备注" />
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="save">保存</button>
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>

<div class="modal fade" id="setPrivilegeModal" tabindex="-1" role="dialog" aria-labelledby="setPrivilegeLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">分配角色</h4>
</div>
<div class="modal-body">
@*<form class="form-horizontal">*@
<input type="hidden" name="RoleID" id="RoleID" value="" />

<div id="tree"></div>
<div id="treeview-checkable" class=""></div>
@*</form>*@
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="savePrivilege">保存</button>
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
<script>
//全局变量
var ID = "";

//保存成功提示框
function toMsg(msg) {
var d1 = dialog({
title: ‘提示‘,
content: msg,
height: "50",
width: "320",
});
d1.show();
setTimeout(function () {
d1.close().remove();
}, 2000);
};

function edit(row) {
$.get("/Admin/System/EditRole", "ID=" + row.ID, function (data) {
if (data.Statu == "ok") {
ID = data.Data.ID;
$("#Name").val(data.Data.Name);
$("#PrivilegeID").val(data.Data.PrivilegeID);
$("#Note").val(data.Data.Note);
} else {

}
}, "Json");
$(‘#saveModal‘).modal(‘show‘);//打开模态框

}
//新增
$("#add").unbind("click").bind("click", function () {
$(‘#saveModal‘).modal(‘show‘);//打开模态框
});

//分配权限
function setPrivilege(row) {
$("#RoleID").val(row.ID);
$("#setPrivilegeModal").modal(‘show‘);
$(‘#treeview-checkable‘).treeview(‘uncheckAll‘, { silent: true });
//获取该用户的权限
$.get("/Admin/System/GetPrivilegeByRoleId?roleID=" + row.ID, "", function (data) {

var PrivilegeID = "";
if (data.length > 0) {
var nodes = $(‘#treeview-checkable‘).treeview(‘getEnabled‘);
for (var i = 0; i < data.length; i++)
{
PrivilegeID = data[i].PrivilegeID;
for (var j = 0; j < nodes.length; j++)
{
if (nodes[j].id.trim() == data[i].PrivilegeID.trim())
{
$(‘#treeview-checkable‘).treeview(‘checkNode‘, [nodes[j], { silent: true }]);
}
}
}
}
});
}
//删除
function del(row) {
//alert(row.ID);
var d = dialog({
title: ‘提示‘,
content: ‘是否删除‘,
cancelValue: ‘取消‘,
okValue: ‘确定‘,
height: "50",
width: "320",
ok: function () {
$.get("/Admin/System/RoleDel", "ID=" + row.ID, function (data) {
if (data.Statu == "ok") {
toMsg("删除成功");
window.location.href = data.BackUrl;
// alert(data.BackUrl);
}
}, "Json");
},
cancel: function () {

}
});
d.show();
}

//创建子树
function BindChildNode(source, parcode) {
var result = "";
for (var i = 0; i < source.length; i++) {
if ((source[i].PID == null ? "" : source[i].PID.trim()) == (parcode == null ? "" : parcode.trim())) {
if (result == "") {
result = ",\"nodes\":[";
result += "{\"id\":\" " + source[i].ID + " \",\"text\":\" " + source[i].Name + " \",\"href\": \"#parent2\", \"tags\": \"[‘0‘]\"" + BindChildNode(source, source[i].ID) + "}";
}
else {
result += ",{\"id\":\" " + source[i].ID + " \",\"text\":\" " + source[i].Name + " \",\"href\": \"#parent2\", \"tags\": \"[‘0‘]\"" + BindChildNode(source, source[i].ID) + "}";
}
}
}
if (result != "")
result += "]";
return result;
}

$(function () {

//权限树
$.get("/Admin/System/GetPrivilegeHelper", "", function (data) {
if (data.Statu == "ok") {
var pPrivilege = "[";
for (var i = 0; i < data.Data.length; i++) {
if (data.Data[i].PID == null || data.Data[i].PID.trim() == "" || data.Data[i].PID.trim() == "null") {
//生成父权限
if (pPrivilege == "[") {
pPrivilege += "{\"id\":\" " + data.Data[i].ID + " \",\"text\":\" " + data.Data[i].Name + " \",\"href\": \"#parent2\", \"tags\": \"[‘0‘]\"" + BindChildNode(data.Data, data.Data[i].ID) + "}";
} else {
pPrivilege += ",{\"id\":\" " + data.Data[i].ID + " \",\"text\":\" " + data.Data[i].Name + " \",\"href\": \"#parent2\", \"tags\": \"[‘0‘]\"" + BindChildNode(data.Data, data.Data[i].ID) + "}";

}
}
}

pPrivilege += "]";
$.parseJSON(pPrivilege)
//权限树
var $checkableTree = $(‘#treeview-checkable‘).treeview({
data: pPrivilege,
showIcon: false,
showCheckbox: true,
onNodeChecked: function (event, node) {

},
onNodeUnchecked: function (event, node) {

}
});

//保存分配权限
$("#savePrivilege").unbind("click").bind("click", function () {
var AllPrivilege = new Array();
var nodeList = $(‘#treeview-checkable‘).treeview(‘getChecked‘);
for (var i = 0; i < nodeList.length; i++) {
AllPrivilege[i] = nodeList[i].id;
}

var RoleID = $("#RoleID").val();
$.post("/Admin/System/SetRolePrivilege?AllPrivilege=" + AllPrivilege + "&RoleID=" + RoleID, "", function (data) {
if (data.Statu == "ok") {
$("#setPrivilegeModal").modal(‘hide‘);
toMsg("设置成功");
}
});
});
}
});

//保存
$("#save").unbind("click").bind("click", function () {
$(‘#saveModal‘).modal(‘hide‘)
var params = "ID=" + ID
+ "&Name=" + $("#Name").val()
+ "&PrivilegeID=" + $("#PrivilegeID").val()
+ "&Note=" + $("#Note").val();

$.post("/Admin/System/RoleSave", params, function (data) {
if (data.Statu == "ok") {
window.location.href = data.BackUrl;
toMsg("保存成功");
} else {

toMsg("保存失败");
}
});

});

//===============================
var $table = $(‘#table‘);
//获取选中行数据
$table.on(‘click-row.bs.table‘, function (e, row, $element) {
$(‘.success‘).removeClass(‘success‘);
$($element).addClass(‘success‘);
});
$(‘#get‘).click(function () {
alert(‘Selected name: ‘ + getSelectedRow().name);
});

//下拉框
$(‘#toolbar‘).find(‘select‘).change(function () {
$table.bootstrapTable(‘refreshOptions‘, {
exportDataType: $(this).val()
});
});

});

</script>
</body>
</html>

生成树形选项

标签：

原文地址：http://www.cnblogs.com/mfc-itblog/p/5240394.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行