实现树形表格显示

没空整理，先把完整页面放出来。

@model IEnumerable<EsaiManagementSystem.Application.DTOs.PrivilegeDTO>
<link href="../../../themes/default/css/privilegeTree.css" rel="stylesheet" type="text/css" />
<script src="../../../themes/default/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../../../themes/default/js/jquery.easyui.min.js" type="text/javascript"></script>
<script src="../../../themes/default/js/showMessage.js" type="text/javascript"></script>
<link href="../../../themes/default/css/messageShow.css" rel="stylesheet" type="text/css" />
@*显示树形结构*@
<script type="text/javascript">

function showTableCss() {
$(".List_Table tr").mouseover(function () {
if ($(this).css("background-color") != "rgb(21, 185, 167)" || MyTrim($(this).css("background-color"), getComputedStyle) != "#15B9A7") {
$(this).css("background-color", "#dff4fe");
}
});
$(".List_Table tr").mouseout(function () {
if ($(this).css("background-color") != "rgb(21, 185, 167)") {
$(this).css("background-color", "#fff");
}
});
}
$(function () {
showRowNuber();
showTableCss();
});
var trString;
//增加tr的方法 id为父类的Id,typeId类型Id class='type" + typeId + "'
function AfterTr(id, typeId, data) {
trString = "";
//定义向左偏移多少px，实现树形
var marginLeft = typeId == 1 ? 10 : (typeId == 2) ? 30 : (typeId == 3) ? 50 : (typeId == 4) ? 70 : 95;
//解析json数据
for (var i = 0; i < data.length; i++) {
trString += "<tr align='center' οnclick='SavePrivilegeId(" + data[i].Id + "," + typeId + "," + id + ")' class='show" + id + " type" + typeId + " ' id='show" + data[i].Id + "'><td align='left' class='rowNuber'></td><td align='left'><span style='margin-left:" + marginLeft + "px'>";
if (data[i].issubClass != 0) {
trString += "<a href='#'" + "οnclick=ShowTree(" + data[i].Id + "," + typeId + ")" + "><img src='../../../themes/default/images/zankai%20.png' /></a><img src='../../../themes/default/images/Icon_Cata_1.gif' />";
} else {
trString += "<img src='../../../themes/default/images/Icon_Cata_2.gif' />";
}
trString += data[i].Name + "</span></td>";
trString += "<td>" + data[i].IsShow + "</td>";
trString += "<td>" + data[i].IsValid + "</td>";
trString += "<td>" + data[i].KeyName + "</td>";
trString += "<td>" + data[i].PValue + "</td>";
trString += "<td>" + data[i].SortIndex + "</td>";
trString += "<td>" + data[i].Remark + "</td>";
trString += "</tr>";
}
}

//显示其子类
function ShowTree(id, typeId) {
var classId = "#show" + id; //当前行的class属性Id

var sonTypeId = parseInt(typeId) + 1;
$.post('@Url.Action("GetPrivileLeftForTypeIdAndId", "Privilege")', { id: id, typeId: sonTypeId }, function (data) {

AfterTr(id, sonTypeId, data); //生成往当前行追加数据

$(classId).find("a").attr("onclick", "ClossTree(" + id + "," + typeId + ")"); //修改点击触发的方法

$(classId).find("a>img").attr("src", "../../../themes/default/images/bihe.png"); //修改显示的图片
$(classId).after(trString); //追加数据
showTableCss(); //渲染行间隔的CSs
showRowNuber(); //显示行号

$(classId).css("background-color", "#dff4fe"); //修改当前行的样式

$(classId).attr("id", "close" + id); //修改当前行的Id
});
event.stopPropagation();

}

//去除显示其子类 父类Id ,类型Id
function ClossTree(id, typeId) {
//要删除的行的Id(当前行的子类行Id)
var removeId = ".show" + id;
// var tpId = ".type"+typeId;
//当前行的Id
var classId = "#close" + id;

$(classId).css("background-color", "#dff4fe"); //修改当前行的样式 对点击闭合产生的事件冒泡的影响

RemoveShow(removeId, id, typeId); //去除其子类的所有行

Remove(classId, id, typeId); //修改行的class属性 替换显示图片 和点击触发的方法
showRowNuber(); //显示行号
event.stopPropagation();
}

//去除显示其子类 参数为行的class ID 递归方法
function RemoveShow(classId, id, typeId) {

$(classId).each(function () {
//获取该行Id
var sonId = $(this).attr("id");

//查看是否有孙字辈的
var isHasTr = $("#" + sonId).find("img").length;

if (isHasTr == 2) { //如果有子元素，执行递归
var substrId = get_current_pagenum(sonId); //获取Id的数字

var cls = ".show" + substrId;

RemoveShow(cls, substrId, typeId); //执行递归

$("#" + sonId).remove();
Remove("." + sonId, id, typeId);

} else {
$("#" + sonId).remove();
Remove("." + sonId, id, typeId);
return;
}
});

showRowNuber(); //显示行号
}

//去除显示指定classId的行
function Remove(classId, id, typeId) {

$(classId).find("a").attr("onclick", "ShowTree(" + id + "," + typeId + ")");
$(classId).find("a>img").attr("src", "../../../themes/default/images/zankai%20.png");
$(classId).attr("id", "show" + id);
}

//js 获取字符串中的数字（正则）
function get_current_pagenum(u) {//取全部数字。
var a = u.match(/\d/g).join(""); //取所有数字字符，放入数组，再连成串。
return parseInt(a); //转为数字。
}

//去除所有空格
function MyTrim(str, isGlobal) {
var result;
result = str.replace(/(^\s+)|(\s+$)/g, "");
if (isGlobal.toLowerCase() == "g")
result = result.replace(/\s/g, "");
return result;
}

//显示行号
function showRowNuber() {
var trNumber = 1;
$(".List_Table").find(".rowNuber").each(function () {
$(this).html(trNumber);
$(this).css("text-align", "center");
trNumber += 1;
});

}
</script>
@*实现数据的增删改查*@
<script type="text/javascript">

var url = "";
function SavePrivilegeId(id, typeId, pid) {
var trShow = ("#show" + id);
$(".List_Table tr").css("background-color", "#fff");
$(trShow).css("background-color", "#15B9A7");
$("#close" + id).css("background-color", "#15B9A7"); //这个不一定有，貌似ie不支持
$("#hiddenPrivilegeId").val(id); //权限Id
$("#hiddenPrivilegetypeId").val(typeId); //类型Id
$("#hiddenParentId").val(pid); //父Id
}

function Add() {
$('#dlg').dialog('open').dialog('setTitle', '添加');
$('#hiddentitle').val(1);
$('#dlg').form('clear');
var privilegeId = $(".hiddenPrivilegeId").val();
var privilegetypeId = $(".hiddenPrivilegetypeId").val();
url = '@Url.Action("AddPrivilegeJson", "Privilege")' + "?parentId=" + privilegeId + "&typeId=" + privilegetypeId;
if (privilegetypeId >= 4) {
showTips("下面没有子类了", 150, 1);
$('#dlg').dialog('close'); // close the dialog
return;
}
}

//删除权限
var RemovePrivilege = function () {
var privilegeId = $(".hiddenPrivilegeId").val(); //权限Id
var typeId = parseInt($(".hiddenPrivilegetypeId").val()); //权限类型Id
var parentId = $(".hiddenParentId").val(); //其父类Id
if (privilegeId == 0) {
showTips("请选择你要删除的行", 150, 1);
return;
}
var url = '@Url.Action("DeletePrivilegeJson", "Privilege")';
$.messager.confirm('提示：', '你真的要删除该对象的一切吗？', function (r) {
if (r) {
$.post(url, { Ids: privilegeId, typid: typeId }, function (result) {
if (result == true) {
if (typeId >= 2) {
ClossTree(parentId, (typeId - 1));
ShowTree(parentId, (typeId - 1));
} else {
url = '@Url.Action("_PrivilegeListControl", "Privilege")';
$(".List_Table").load(url);
}
showTips("删除成功", 150, 1);
} else {
showTips("删除失败", 150, 1);
}
}, 'json');
}

});
};

//保存
function Save() {
$('#fm').form('submit', {
url: url,
onSubmit: function () {
if ($(this).form('validate')) {
// showTips("正在请求服务器", 150, 1);
}
return $(this).form('validate');
},
success: function (data) {
$.messager.progress('close');
var result = eval('(' + data + ')');
if (result == true) {
$('#dlg').dialog('close'); // close the dialog
showTips("操作成功", 150, 1);
url = '@Url.Action("_PrivilegeListControl", "Privilege")';
var privilegeId = parseInt($(".hiddenPrivilegeId").val());
var privilegetypeId = parseInt($(".hiddenPrivilegetypeId").val());
var parentId = parseInt($(".hiddenParentId").val()); //其父类Id
var title = parseInt($('#hiddentitle').val());

if (title == 1) { //表示为增加
//显示新增的那条数据
ShowTree(privilegeId, privilegetypeId);

//获取你点击的当前行
var trIdjquery = FindId(privilegeId);
//判断在没新增的时候启是否包含有子元素
if ($(trIdjquery).find("img").length == 1) {
// alert(1);
//改变图片链接
$(trIdjquery).find("img").attr("src", "../../../themes/default/images/Icon_Cata_1.gif");
//往span里新增元素，在img标签前面
$(trIdjquery).find("img").before("<a href='#'" + "οnclick=ShowTree(" + privilegeId + "," + privilegetypeId + ")" + "><img src='../../../themes/default/images/zankai%20.png' /></a>");
}
//刷新页面
else if ($(trIdjquery).find("img").length == 0) {
$(".List_Table").load(url);
alert(0);
} else if ($(trIdjquery).find("img").length == 2) {
// alert(2);
if (privilegetypeId >= 2) {
ClossTree(privilegeId, (privilegetypeId - 1));
ShowTree(privilegeId, (privilegetypeId - 1));
} else {
url = '@Url.Action("_PrivilegeListControl", "Privilege")';
$(".List_Table").load(url);
}
}

 

} else { //为编辑的情况

if (privilegetypeId >= 2) {
ClossTree(parentId, (privilegetypeId - 1));
ShowTree(parentId, (privilegetypeId - 1));
} else {
url = '@Url.Action("_PrivilegeListControl", "Privilege")';
$(".List_Table").load(url);
}
}
$('#hiddentitle').val(0);
} else {
showTips("操作失败", 150, 1);
}
}
});
}

//编辑权限
function Edit() {
var privilegeId = $(".hiddenPrivilegeId").val();
var privilegetypeId = $(".hiddenPrivilegetypeId").val();
var trclass = FindId(privilegeId);
var privilegeName = $.trim($(trclass).find("td").eq(1).text());
var isShow = $.trim($(trclass).find("td").eq(2).text());
var isValid = $.trim($(trclass).find("td").eq(3).text());
var key = $.trim($(trclass).find("td").eq(4).text());
var value = $.trim($(trclass).find("td").eq(5).text());
var sortIndex = $.trim($(trclass).find("td").eq(6).text());
var remark = $.trim($(trclass).find("td").eq(7).text());
$("#Name").val(privilegeName);

if (isShow == "true" || isShow == "True") {
$(".isShow").attr("checked", "true");
} else {
$(".isNotShow").attr("checked", "true");
}
if (isValid == "true" || isValid == "True") {
$(".IsValid").attr("checked", "true");
} else {
$(".IsNotValid").attr("checked", "true");
}
$("#PValue").val(value);
$("#KeyName").val(key);
$("#SortIndex").val(sortIndex);
$("#Remark").val(remark);

$('#dlg').dialog('open').dialog('setTitle', '修改');
url = '@Url.Action("UpdatePrivilegeJson", "Privilege")?Pid=' + privilegeId + "&TypeId=" + privilegetypeId;
}

 

//处理改变id中show或close时的查找问题

function FindId(id) {
var trIdjquery = "";
if ($("#show" + id).length > 0) {
trIdjquery = "#show" + id;
} else {
trIdjquery = "#close" + id;
}
return trIdjquery;
}

</script>
<div id="TextBox" class="TextBox">
<div id="toolbar" style="padding-left: 20px; height: auto">
<div style="margin-top: 6px; background-color: #EFEFEF;">
<div>
<a href="#" class="easyui-linkbutton" iconcls="icon-add" plain="true" οnclick="Add()">
添加</a> <a href="#" class="easyui-linkbutton" iconcls="icon-edit" plain="true" οnclick="Edit()">
编辑</a> <a href="#" class="easyui-linkbutton" iconcls="icon-remove" plain="true" οnclick="RemovePrivilege()">
删除</a> <a href="#" class="easyui-linkbutton" iconcls="icon-remove" plain="true" οnclick="ColseTree()">
<span id="shouqi">收起</span> </a>
</div>
</div>
</div>
@Html.Partial("_PrivilegeListControl", Model)
</div>
<div id="dlg" class="easyui-dialog" style="width: 500px; height: 380px;" closed="true"
modal="true" buttons="#dlg-buttons">
<form id="fm" method="post">
<table width="100%" border="0" class="tab-come" cellspacing="1" cellpadding="0" style="border-spacing: 10px 10px;">
<tbody>
<tr>
<th style="width: 90px">
权限：
</th>
<td>
@Html.TextBox("Name", null, new { @class = "easyui-validatebox Privilegeclass", @style = "width: 200px;", required = "true", missingmessage = "不能为空", validtype = "length[1,10]", invalidmessage = "不能超过10个字！", @id = "Name" })<span
class="orange">*</span>
</td>
</tr>
<tr>
<th style="width: 90px">
可见状态：
</th>
<td>
@Html.RadioButton("IsShow", "true", true, new { @class = "isShow" }) 可见
@Html.RadioButton("IsShow", "false", false, new { @class = "isNotShow" }) 不可见
</td>
</tr>
<tr>
<th style="width: 90px">
可用状态：
</th>
<td>
@Html.RadioButton("IsValid", "true", true, new { @class = "IsValid" }) 可用
@Html.RadioButton("IsValid", "false", false, new { @class = "IsNotValid" }) 不可用
</td>
</tr>
<tr>
<th style="width: 90px">
权限的key：
</th>
<td>
@Html.TextBox("KeyName", null, new { @class = "easyui-validatebox ", @style = "width: 200px;", required = "true", missingmessage = "不能为空", validtype = "length[1,10]", invalidmessage = "不能超过10个字！", @id = "KeyName" })
</td>
</tr>
<tr>
<th style="width: 90px">
权限的值：
</th>
<td>
@Html.TextBox("PValue", null, new { @class = "easyui-numberbox", @style = "width: 200px;", required = "true", missingmessage = "不能为空", precision = "0", max = "99", size = "4", maxlength = "4", @id = "PValue" })<span
class="orange">*</span>
</td>
</tr>
<tr>
<th style="width: 90px">
分类序号：
</th>
<td>
@Html.TextBox("SortIndex", null, new { @class = "easyui-numberbox", @style = "width: 200px;", required = "true", missingmessage = "不能为空", precision = "0", max = "99", size = "4", maxlength = "4", @id = "SortIndex" })<span
class="orange">*</span>
</td>
</tr>
<tr>
<th style="width: 90px">
备注：
</th>
<td>
@Html.TextBox("Remark", null, new { @class = "easyui-validatebox branameclass", @style = "width: 200px;", required = "true", missingmessage = "不能为空", validtype = "length[1,10]", invalidmessage = "不能超过10个字！", @id = "Remark" })<span
class="orange">*</span>
</td>
</tbody>
</table>
</form>
</div>
<div id="dlg-buttons">
<a href="#" class="easyui-linkbutton" id="btnSubmit" iconcls="icon-ok" οnclick="Save()">
保存</a> <a href="#" class="easyui-linkbutton" iconcls="icon-cancel" οnclick="javascript:$('#dlg').dialog('close');">
取消</a>
</div>

转载于:https://www.cnblogs.com/noert/p/3412719.html