bootstrap-treeview 案例。
程序员文章站
2022-06-08 10:44:55
...
<!DOCTYPE html>
<html>
<head >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.buttonclass {
margin-right: 10px;
}
</style>
<script>
var cs = new SysService();
var _id = "";
var _index = 1;
function add() {
$("#ShowDialog").modal("show");
_id = "0";
}
function addModel() {
var node = $('#tree').treeview('getSelected');
if (node.length == 0) {
alert('请选择模块');
return;
}
$('#parentModel2').val(node[0].modelname)
$('#childModelName2').val("")
$('#childDesc2').val("");
$("#ShowDialog3").modal("show");
}
function edit() {
var node = $('#tree').treeview('getSelected');
if (node.length == 0) {
alert('请选择模块');
return;
}
$("#ShowDialog2").modal("show");
if (node[0].level != '1') {
$('#parentModel').val(node[0].parentModelName)
} else {
$('#parentModel').val("");
}
$('#childModelName').val(node[0].modelname)
$('#childDesc').val(node[0].desc)
}
function updateChild() {
var node = $('#tree').treeview('getSelected');
var modelName = $('#childModelName').val();
var projectId = $("#txtprojectId").val();
if (modelName == "") {
alert("模块名称不能为空！");
return;
}
var items = [];
items.push("modelName:\"" + modelName + "\"");
items.push("projectId:\"" + projectId + "\"");
items.push("descript:\"" + $('#childDesc').val() + "\"");
items.push("id:\"" + node[0].id + "\"");
var result = cs.ProjectModelSave("{" + items.join(",") + "}");
result.success(function (data) {
if (data > 0) {
alert("模块信息修改成功！");
if (node[0].level == 1) {
getTree(_index);
} else {
var newNode = {
text: modelName + "<span class='spanClass' style=' display:block;float:right;width:700px'> " + $('#childDesc').val() + "</span>",
id: node[0].id,
modelname: modelName,
desc: $('#childDesc').val(),
};
$('#tree').treeview('updateNode', [node, newNode]);
}
$("#ShowDialog2").modal("hide");
}
else {
alert("模块信息保存失败！");
}
});
result.error(function () {
alert('请求失败');
});
}
function saveChild() {
var node = $('#tree').treeview('getSelected');
var modelName = $('#childModelName2').val();
var projectId = $("#txtprojectId").val();
if (modelName == "") {
alert("模块名称不能为空！");
return;
}
var items = [];
items.push("modelName:\"" + modelName + "\"");
items.push("projectId:\"" + projectId + "\"");
items.push("descript:\"" + $('#childDesc2').val() + "\"");
items.push("level:" + node[0].level + "");
items.push("modelID:\"" + node[0].modelID + "\"");
var result = cs.SaveProjectModelChild("{" + items.join(",") + "}");
result.success(function (data) {
if (data.Table.length > 0) {
alert("模块信息新增成功！");
var parentNode = $('#tree').treeview('getSelected');
var newNode = {
text: modelName + "<span class='spanClass' style=' display:block;float:right;width:700px'> " + $('#childDesc2').val() + "</span>",
id: data.Table[0].id,
modelname: modelName,
desc: $('#childDesc2').val(),
parentModelName: node[0].modelname
};
$('#tree').treeview('addNode', [newNode, parentNode]);
$("#ShowDialog3").modal("hide");
}
else {
alert("模块信息新增失败！");
}
});
result.error(function () {
alert('请求失败');
});
}
function remove() {
var node = $('#tree').treeview('getSelected');
if (node.length == 0) {
alert('请选择模块');
return;
}
if (confirm("确定要删除当前选中模块吗？")) {
var result = cs.DeleteInfong("projectModel", node[0].id);
result.success(function (data) {
if (data > 0) {
alert("模块信息删除成功！");
// GetList(_index);
if (node[0].level == 1) {
getTree(_index);
} else {
$('#tree').treeview('removeNode', [node, { silent: true }]);
}
}
else {
alert("模块信息删除失败！");
}
});
result.error(function () {
alert('请求失败');
});
}
}
function save() {
var modelName = $("#modelName").val();
var projectId = $("#txtprojectId").val();
var descript = $("#descript").val();
if (modelName == "") {
alert("模块名称不能为空！");
return;
}
var items = [];
items.push("modelName:\"" + modelName + "\"");
items.push("projectId:\"" + projectId + "\"");
items.push("descript:\"" + descript + "\"");
items.push("id:\"" + _id + "\"");
var result = cs.ProjectModelSave("{" + items.join(",") + "}");
result.success(function (data) {
if (data > 0) {
alert("模块信息保存成功！");
getTree(_index);
$("#ShowDialog").modal("hide");
}
else {
alert("模块信息保存失败！");
}
});
result.error(function () {
alert('请求失败');
});
}
</script>
</head>
<body class="container-fluid">
<form id="form1" runat="server">
<div class="row" style="padding-top: 8px; padding-left: 0px; padding-right: 0px;">
<div class="row" style="margin: 0; padding-left: 16px; padding-right: 16px;">
<ol id="bcList" class="breadcrumb" style="margin-bottom: 8px;"></ol>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>查询条件 <small></small></h2>
<ul class="nav navbar-right panel_toolbox">
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div class="row">
<div class="col-sm-1 col-right">模块名称</div>
<div class="col-sm-2 col-left">
<input class="form-control citem" id="txttemplateName" type="text" />
</div>
<div class="col-sm-1 col-right">项目名称</div>
<div class="col-sm-2 col-left">
<select id="txtprojectId" class="form-control" onchange="getTree(1);">
</select>
</div>
<div class="col-sm-3 col-left">
<input type="button" class="btn btn-primary" value=" 条件查询 " onclick="getTree(1);" />
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>模块设置<small></small></h2>
<ul class="nav navbar-right panel_toolbox">
<%-- <li><a href="javascript:void(0)" onclick="add();" title="新建模块"><i class="fa fa-plus"></i>新建模块
</a></li>--%>
<li>
<input id="btnAdd" class="btn btn-primary buttonclass" type="button" onclick="add();" value="添加主模块">
</li>
<li>
<input id="addChild" class="btn btn-primary buttonclass" type="button" onclick="addModel();" value="添加子模块">
</li>
<li>
<input id="btnMove" class="btn btn-success buttonclass" type="button" onclick="edit();" value="模块编辑"></li>
<li>
<input id="btnDel" class="btn btn-danger buttonclass" type="button" onclick="remove();" value="模块删除"></li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div id="tree" class="" style="height: 300px; overflow-y: auto; overflow-x: hidden">
</div>
<div class="fixed-table-pagination">
<div class="pull-left pagination-detail">
<span id="spanRefer" class="text-info"></span>
</div>
<div class="pull-right pagination">
<nav id="navPages">
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="ShowDialog" tabindex="-1" role="dialog" aria-labelledby="myModelLabel" aria-hidden="true">
<div class="modal-dialog">
<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="exampleModalLabel">模块新增</h4>
</div>
<div class="modal-body">
<%-- <div class="form-horizontal">
<div class="form-group">
<div class="col-right col-sm-3">
<label>模块编号:</label>
</div>
<div class="col-sm-8" aria-disabled="true">
<input type="text" id="projectModelId" class="form-control citema0" readonly="readonly" />
</div>
</div>
</div>--%>
<div class="form-horizontal">
<input type="hidden" id="id" />
<div class="form-group">
<div class="col-right col-sm-3">
<label>模块名称:</label>
</div>
<div class="col-sm-8" aria-disabled="true">
<input type="text" id="modelName" class="form-control citema0" autocomplete="off" />
</div>
</div>
</div>
<%-- <div class="form-horizontal">
<div class="form-group">
<div class="col-right col-sm-3">
<label>所属公司:</label>
</div>
<div class="col-sm-8" aria-disabled="true" >
<select id="companyId" class="form-control" onchange="LoadProjectList(this.value,this.id);"></select>
</div>
</div>
</div>--%>
<%-- <div class="form-horizontal">
<div class="form-group">
<div class="col-right col-sm-3">
<label>所属项目:</label>
</div>
<div class="col-sm-8" aria-disabled="true">
<select id="projectId" class="form-control"></select>
</div>
</div>
</div>--%>
<div class="form-horizontal">
<div class="form-group">
<div class="col-right col-sm-3">
<label>描述:</label>
</div>
<div class="col-sm-8" aria-disabled="true">
<textarea id="descript" rows="4" class="form-control"></textarea>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="button" id="btnSave" class="btn btn-primary" value="保存" onclick="save()" />
<input type="button" id="btnClose" class="btn btn-default" value="关闭" onclick="$('#ShowDialog').modal('hide')" />
</div>
</div>
</div>
</div>
<div class="modal fade" id="ShowDialog2" tabindex="-1" role="dialog" aria-labelledby="myModelLabel" aria-hidden="true">
<div class="modal-dialog">
<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="">模块编辑</h4>
</div>
<div class="modal-body">
<div class="form-horizontal">
<div class="form-group">
<div class="col-right col-sm-3">
<label>上级模块名称:</label>
</div>
<div class="col-sm-8" aria-disabled="true">
<input type="text" id="parentModel" class="form-control citema0" readonly="readonly" autocomplete="off" />
</div>
</div>
</div>
<div class="form-horizontal">
<div class="form-group">
<div class="col-right col-sm-3">
<label>模块名称:</label>
</div>
<div class="col-sm-8" aria-disabled="true">
<input type="text" id="childModelName" class="form-control citema0" autocomplete="off" />
</div>
</div>
</div>
<div class="form-horizontal">
<div class="form-group">
<div class="col-right col-sm-3">
<label>描述:</label>
</div>
<div class="col-sm-8" aria-disabled="true">
<textarea id="childDesc" rows="4" class="form-control"></textarea>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="button" id=" " class="btn btn-primary" value="保存" onclick="updateChild()" />
<input type="button" class="btn btn-default" value="关闭" onclick="$('#ShowDialog2').modal('hide')" />
</div>
</div>
</div>
</div>
<div class="modal fade" id="ShowDialog3" tabindex="-1" role="dialog" aria-labelledby="myModelLabel" aria-hidden="true">
<div class="modal-dialog">
<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="">新增子模块</h4>
</div>
<div class="modal-body">
<div class="form-horizontal">
<div class="form-group">
<div class="col-right col-sm-3">
<label>上级模块名称:</label>
</div>
<div class="col-sm-8" aria-disabled="true">
<input type="text" id="parentModel2" class="form-control citema0" readonly="readonly" autocomplete="off" />
</div>
</div>
</div>
<div class="form-horizontal">
<div class="form-group">
<div class="col-right col-sm-3">
<label>模块名称:</label>
</div>
<div class="col-sm-8" aria-disabled="true">
<input type="text" id="childModelName2" class="form-control citema0" autocomplete="off" />
</div>
</div>
</div>
<div class="form-horizontal">
<div class="form-group">
<div class="col-right col-sm-3">
<label>描述:</label>
</div>
<div class="col-sm-8" aria-disabled="true">
<textarea id="childDesc2" rows="4" class="form-control"></textarea>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-primary" value="保存" onclick="saveChild()" />
<input type="button" class="btn btn-default" value="关闭" onclick="$('#ShowDialog3').modal('hide')" />
</div>
</div>
</div>
</div>
<script>
LoadProjectList(localStorage.companyId);
setTimeout(function () {
getTree(1);
}, 500);
var jsonData = [];
//获取树数据
function getTree(index) {
_index = index;
var items = [];
var jsonList = [];
jsonList.push("modelname:\"" + $('#txttemplateName').val() + "\"");
var projectId = $('#txtprojectId').val();// "7CE73A3D64224D39";// == null ? 0 : $('#txtprojectId').val();
jsonList.push("projectId:\"" + projectId + "\"");
jsonList.push("companyid:\"" + localStorage.companyId + "\"");
var data = '{Index:' + _index + ',PageSize:' + localStorage.PageSize + ',' + jsonList.join(',') + '}';
var result = cs.GetProjectModelList(data);
result.success(function (data) {
if (data.Table.length > 0) {
for (var i = 0; i < data.Table.length; i++) {
var desc = data.Table[i].descript.replace(/\n/g, ",")
// items.push("{text:\"" + data.Table[i].modelname + "\",level:\"" + data.Table[i].modelLevel + "\",id:\"" + data.Table[i].id + "\",modelID:\"" + data.Table[i].projectModelId + "\",lazyLoad: true}");desc
items.push("{text:\" " + data.Table[i].modelname + "<span class='spanClass' style=' display:block;float:right;width:700px'> " + desc + "</span>\",modelname:\"" + data.Table[i].modelname + "\",id:\"" + data.Table[i].id + "\",modelID:\"" + data.Table[i].projectModelId + "\",desc:\"" + desc + "\",lazyLoad: true}");
}
jsonData = eval("[" + items.join(',') + "]");
} else {
jsonData = [{ id: 0, text: "" }];
}
onLoad();
var num = data.Table1[0].RecNum;
dividePage(localStorage.PageSize, index, num, "getTree", "");
});
}
function onLoad() {
$('#tree').treeview({
data: jsonData,
levels: 1,
showTags: true,
onNodeSelected: function (event, node) {
// console.log(node.text + " " + node.id)
if (node.level == '3') {
$('#addChild').attr('disabled', 'true')
} else {
$('#addChild').removeAttr('disabled')
}
},
showCheckbox: false,//是否显示多选
lazyLoad: loaddata
});
}
//事件注册
function loaddata(node, func) {
var singleNode = [];
var items = [];
func(singleNode);
var jsonList = [];
var projectID = $('#txtprojectId').val();// "7CE73A3D64224D39";//$('#txtprojectId').val(); // 这里改为动态获取；
var projectmodelid = node.modelID;
jsonList.push("projectid:\"" + projectID + "\",projectmodelid:\"" + projectmodelid + "\"");
var data = '{ ' + jsonList.join(',') + '}';
var result = cs.GetL1ProjectModel(data);
result.success(function (data) {
if (data.Table.length > 0) {
for (var i = 0; i < data.Table.length; i++) {
var desc = data.Table[i].descript.replace(/\n/g, ",")
if (data.Table[i].modelLevel == '2') {
//items.push("{text:\"" + data.Table[i].modelname +"       "+ data.Table[i].descript + "\",modelname:\"" + data.Table[i].modelname + "\",desc:\"" + data.Table[i].descript + "\",parentModelName:\"" + data.Table[i].parentModelName + "\",id:\"" + data.Table[i].id + "\",modelID:\"" + data.Table[i].projectModelId + "\",lazyLoad: true}");
items.push("{text:\"" + data.Table[i].modelname + "<span class='spanClass' style=' display:block;float:right ;width:700px '> " + desc + "</span>\",modelname:\"" + data.Table[i].modelname + "\",desc:\"" + desc + "\",parentModelName:\"" + data.Table[i].parentModelName + "\",id:\"" + data.Table[i].id + "\",modelID:\"" + data.Table[i].projectModelId + "\",lazyLoad: true}");
} else {
items.push("{text:\"" + data.Table[i].modelname + "<span class='spanClass' style=' display:block;float:right ;width:700px '>" + desc + "</span>\",modelname:\"" + data.Table[i].modelname + "\",desc:\"" + desc + "\",parentModelName:\"" + data.Table[i].parentModelName + "\",id:\"" + data.Table[i].id + "\",modelID:\"" + data.Table[i].projectModelId + "\"}");
}
}
singleNode = eval("[" + items.join(',') + "]");
} else {
// singleNode = [{ id: 0, text: "" }];
}
func(singleNode);
});
}
$("#bcList").html(this.parent.getUrlPath(this.location.pathname));
</script>
</form>
</body>
</html>
增删改查 案例。