生成树形选项

@{
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 class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">角色管理</div>
<div class="panel-body">
<div id="toolbar">
<button type="button" class="btn btn-default" id="add">
<span class="glyphicon glyphicon-plus"></span>&nbsp;新增
</button>

</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>

<!-- Modal -->
<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">&times;</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>
<!-- Modal -->
<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">&times;</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()
});
});

});

function getSelectedRow() {
var index = $table.find(‘tr.success‘).data(‘index‘);
return $table.bootstrapTable(‘getData‘)[index];
}
//操作
function actionFormatter(value, row, index) {
return [
‘<a class="edit ml10" href="javascript:void(0)" title="Edit">‘,
‘<i class="glyphicon glyphicon-edit"></i>编辑‘,
‘</a>&nbsp;&nbsp;&nbsp;‘,
‘<a class="setPrivilege ml10" href="javascript:void(0)" title="setPrivilege">‘,
‘<i class="glyphicon glyphicon-cog">分配权限</i>‘,
‘</a>&nbsp;&nbsp;&nbsp;‘,
‘<a class="remove ml10" href="javascript:void(0)" title="Remove">‘,
‘<i class="glyphicon glyphicon-remove">删除</i>‘,
‘</a>‘
].join(‘‘);
}
window.actionEvents = {
‘click .edit‘: function (e, value, row, index) {
edit(row);
console.log(value, row, index);
},
‘click .setPrivilege‘: function (e, value, row, index) {
setPrivilege(row);
console.log(value, row, index);
},
‘click .remove‘: function (e, value, row, index) {
del(row);
console.log(value, row, index);
}
};

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

时间： 2024-10-05 01:51:14

生成树形选项的相关文章

生成树形菜单

题记------学习别人的精髓,并加以总结,消化吸收,这就是提高!!! 动态生成树形菜单,前台用easyui实现,非常简单不赘述,主要给出后台java的逻辑代码 1 package com.gongli.util.entity.treeMenu; 2 3 4 5 /* 6 * 用于封装树形菜单,无具体表与之对应,根节点为-1,节点0,然后父节点0,节点001,父节点001,节点001001,001002,001...依次类推 7 */ 8 public class TreeMenu { 9 pr

Delphi中根据分类数据生成树形结构的最优方法

一. 引言:    TreeView控件适合于表示具有多层次关系的数据.它以简洁的界面,表现形式清晰.形象,操作简单而深受用户喜爱.而且用它可以实现ListView.ListBox所无法实现的很多功能,因而受到广大程序员的青睐.    树形结构在Windows环境中被普遍应用,但在数据库开发中面对层次多.结构复杂的数据,如何快速构造树形目录并实现导航呢?    二. 实现关键技术:    在Delphi提供的控件中包含了TreeView控件,但树的具体形成还需要用户编写代码.即它的列表项要在程序

WPF下递归生成树形数据绑定到TreeView上

最终效果图:(用于学习类的效果 图片丑了点,看官莫怪) 新建窗体 然后在前端适当位置插入如下代码: <TreeView x:Name="departmentTree" Height="500" Width="500"> <TreeView.ItemTemplate> <HierarchicalDataTemplate ItemsSource="{Binding Nodes}"> <St

如何生成树形文件目录结构

一.生成树形结构的目录 如下形式:E:.│  .buildpath│      ├─attachment│  │  image-not-exist.gif│  │  readme│  │  │  ├─2014│  │  ├─01│  │  │  ├─01│  │  │  ├─02│  │  │  ├─03 方法:用MS-Dos下的tree命令 1.在windows中打开命令行窗口 2.进入你想要列出目录下面 [cd E:\Develop\SourceCode] 3.命令提示符下运行 tree /

C#生成树形结构泛型类

C#生成树形结构泛型类,使用方法: ToTree<ShowMessageUpdatesTableTreeViewModel>.ToDo(models) public class ToTree<T> where T : IToTreeModel { public static List<T> ToDo(List<T> models) { var dtoMap = new Dictionary<int, T>(); foreach (var item

WPF下递归生成树形数据绑定到TreeView上（转）

最终效果图:(用于学习类的效果 图片丑了点,看官莫怪) 新建窗体 然后在前端适当位置插入如下代码: <TreeView x:Name="departmentTree" Height="500" Width="500"> <TreeView.ItemTemplate> <HierarchicalDataTemplate ItemsSource="{Binding Nodes}"> <St

根据指定规则生成游戏选项编码实战

进入遇到这样的需求 “有不定数量的游戏选项和不定的游戏人数选项给用户选择,我们按照  游戏人数<<24 | 游戏规则A<<16 | 游戏规则B<<8 | 游戏规则C      游戏规则D<<24 | 游戏规则E<<16 | 游戏规则F<<8 | 游戏规则G ........  来生成所有规则可能选中和未选中的游戏码” 该需求中,不定数量的游戏选项和游戏人数需要动态输入  我们需要使用读取配置文件来获取多少游戏人数和游戏规则 这是待实现

2014马哥Linux0218-1字符测试与生成交互式选项表的脚本代码

0218课里,先是一个简单的小程序,注意字符测试的使用,建议所有被测试的字符都要加引号,而在字符测试匹配模式(也可以使正则表达式)的时候,需要用双中括号,题目如下: 练习:判定所有用户是否拥有可登陆shell #!/bin/bash for userName in `cut -d: -f1 /etc/passwd`;do if [[ `grep "^$userName\>" /etc/passwd | cut -d: -f7` =~ sh$ ]]; then echo "

c#从数据库读取数据动态生成树形菜单

页面: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebTree.aspx.cs" Inherits="Tree.WebTree" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/