bootstrap-treeview 使用demo心得。真實案例。
阿新 • • 發佈：2018-12-19
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="projectModelList.aspx.cs" Inherits="MES_Web.Sys.projectModelList" %> <!DOCTYPE html> <html> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>主模組資訊</title> <link href="../Scripts/bootstrap/bootstrap.min.css" rel="stylesheet" /> <link href="../Content/animate.min.css" rel="stylesheet" /> <link href="../Content/font-awesome.css" rel="stylesheet" /> <link href="../Content/mes-main.css" rel="stylesheet" /> <link href="../Content/datetime/bootstrap-datetimepicker.min.css" rel="stylesheet" /> <link href="../Content/tabframe/dataTables.bootstrap.css" rel="stylesheet" /> <link href="../Scripts/bootstrap/bootstrap-treeview.min.css" rel="stylesheet" /> <script src="../Scripts/bootstrap/jquery-3.1.1.min.js"></script> <script src="../Scripts/jquery.min.js"></script> <script src="../Scripts/bootstrap/bootstrap.min.js"></script> <script src="../Scripts/bootstrap/bootstrap-treeview.js"></script> <script src="../Scripts/config.js"></script> <script src="../content/tabframe/jquery.dataTables.min.js"></script> <script src="../content/tabframe/dataTables.bootstrap.min.js"></script> <script src="../Scripts/services/sysService.js"></script> <script src="../Content/datetime/bootstrap-datetimepicker.min.js"></script> <script src="../Content/datetime/locales/bootstrap-datetimepicker.zh-CN.js"></script> <script src="../Scripts/ajaxuploadfiles.js"></script> <script src="../Scripts/services/TemplateService.js"></script> <script src="../Scripts/publicFunction.js"></script> <style> .buttonclass { margin-right: 10px; } .spanClass { width: 350px; } </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>
增刪改查 案例。
附上效果圖：
