Department List Tree
1
<div class="col-sm-3">
<div class="table-header">
Department List
<a class="green" href="#">
<!--Add department button-->
<i class="ace-icon fa fa-plus-circle orange bigger-130 dept-add"></i>
</a>
</div>
<div id="deptList">
<!--Show department list-->
</div>
</div>
2
<!--mustache template-->
<script id="deptListTemplate" type="x-tmpl-mustache">
<ol class="dd-list">
<!--Use loop in the template, loop the elements of deptList-->
{{#deptList}}
<li class="dd-item dd2-item dept-name" id="dept_{{id}}" href="javascript:void(0)" data-id="{{id}}">
<!--Department name-->
<div class="dd2-content" style="cursor:pointer;">
{{name}}
<!--Edit, delete button-->
<span style="float:right;">
<a class="green dept-edit" href="#" data-id="{{id}}" >
<i class="ace-icon fa fa-pencil bigger-100"></i>
</a>
<a class="red dept-delete" href="#" data-id="{{id}}" data-name="{{name}}">
<i class="ace-icon fa fa-trash-o bigger-100"></i>
</a>
</span>
</div>
</li>
{{/deptList}}
</ol>
</script>
3
<script type="text/javascript">
$(function(){
var deptList; // store the tree department list
var deptMap = {}; // store all department information in map format
var optionStr = ""; // option of drop-down box
var deptListTemplate = $ ('# deptListTemplate'). html ();
Mustache.parse(deptListTemplate);
loadDeptTree(); // initialize and display the department tree
// render the first level department tree
function loadDeptTree() {
$.ajax({
url: "/sys/dept/tree",
success : function (result) {
if (result.ret) {
deptList = result.data; // deptList is stored in the global variable
var rendered = Mustache.render(deptListTemplate, {deptList: result.data}); // Render the data deptList (source: json data returned from the background) to the deptListTemplate template as a loop
$("#deptList").html(rendered); // Insert the rendered result into an empty <div id="deptList"></div> for display
recursiveRenderDept(result.data);
bindDeptClick(); // Bind the click event of modifying, deleting, and loading the user list of the current department
} else {
showMessage("Load department list", result.msg, false);
}
}
})
}
// recursively render the department tree
function recursiveRenderDept(deptList) {
if(deptList && deptList.length > 0) {
$(deptList).each(function (i, dept) {
deptMap[dept.id] = dept; // All department information is stored in global variables
// If there are subsections, process recursively
if (dept.deptList.length > 0) {
var rendered = Mustache.render(deptListTemplate, {deptList: dept.deptList});
$("#dept_" + dept.id).append(rendered);
recursiveRenderDept(dept.deptList);
}
})
}
}
})
</script>
add department
1
<div class="table-header"> Department List <a class="green" href="#"> <!--Add department button--> <i class="ace-icon fa fa-plus-circle orange bigger-130 dept-add"></i> </a> </div>
<!--Add department dialog box-->
<div id="dialog-dept-form" style="display: none;">
<form id="deptForm">
<table class="table table-striped table-bordered table-hover dataTable no-footer" role="grid">
<tr>
<td style="width: 80px;"><label for="parentId">上级部门</label></td>
<td>
<select id="parentId" name="parentId" data-placeholder="选择部门" style="width: 200px;"></select>
<input type="hidden" name="id" id="deptId"/>
</td>
</tr>
<tr>
<td><label for="deptName">名称</label></td>
<td><input type="text" name="name" id="deptName" value="" class="text ui-widget-content ui-corner-all"></td>
</tr>
<tr>
<td><label for="deptSeq">顺序</label></td>
<td><input type="text" name="seq" id="deptSeq" value="1" class="text ui-widget-content ui-corner-all"></td>
</tr>
<tr>
<td><label for="deptRemark">备注</label></td>
<td><textarea name="remark" id="deptRemark" class="text ui-widget-content ui-corner-all" rows="3" cols="25"></textarea></td>
</tr>
</table>
</form>
</div>
2
// Click the add button to pop up the add department modal dialog
$(".dept-add").click(function(){
$("#dialog-dept-form").dialog({
model: true, // is it a modal dialog
title: "Add Department",
// Initialize data, etc. when the dialog is opened
open: function(event, ui){
$(".ui-dialog-titlebar-close", $(this).parent()).hide(); // Cancel all default function (close) buttons, because it is not simple to handle related operations when closing close
optionStr = "<option value=\"0\">请选择</option>";
recursiveRenderDeptSelect(deptList, 1);
$("#deptForm")[0].reset(); //Reset the form, clear the form data
$("#parentId").html(optionStr); // 渲染到<select id="parentId"></select>中
},
// The attribute name will be used as the button's prompt text, and the attribute value is a function, that is, the button's processing function
buttons:{
"添加":function(e){
e.preventDefault(); // intercept the default click event
// true is added, false is modified. The action successfully closes the modal.
updateDept(true,
function (data) {
$("#dialog-dept-form").dialog("close");
},
function (data) {
showMessage("Add department", data.msg, false);
})
},
"取消":function(){ $("#dialog-dept-form").dialog("close");}
}
})
})
2.1 Initialize the drop-down box
// The drop-down box initializes the department list function
function recursiveRenderDeptSelect(deptList, level){
level = level | 0; // set to 0 if level is not present
if (deptList && deptList.length > 0){
$(deptList).each(function (i, dept) {
deptMap[dept.id] = dept;
var blank = "";
// if level is not the first level
if(level > 1){
for(var j = 3; j <= level; j++) {
blank += "..";
}
blank += "∟";
}
optionStr += Mustache.render("<option value='{{id}}'>{{name}}</option>", {id: dept.id, name: blank + dept.name}); // 渲染数据
// recursive rendering
if (dept.deptList && dept.deptList.length > 0) {
recursiveRenderDeptSelect(dept.deptList, level + 1);
}
})
}
}
2.2 Save update function
// department save update function
function updateDept(isCreate, successCallback, failCallback) {
$.ajax({
url: isCreate ? "/sys/dept/save" : "/sys/dept/update",
data: $("#deptForm").serializeArray(),
type: 'POST',
success: function(result) {
if (result.ret) {
loadDeptTree();
if (successCallback) {
successCallback(result);
}
} else {
if (failCallback) {
failCallback(result);
}
}
}
})
}
Editorial department
1
<!--mustache template-->
<script id="deptListTemplate" type="x-tmpl-mustache">
<ol class="dd-list">
<!--Use loop in the template, loop the elements of deptList-->
{{#deptList}}
<li class="dd-item dd2-item dept-name" id="dept_{{id}}" href="javascript:void(0)" data-id="{{id}}">
<!--Department name-->
<div class="dd2-content" style="cursor:pointer;">
{{name}}
<!--Edit, delete button-->
<span style="float:right;">
<a class="green dept-edit" href="#" data-id="{{id}}" >
<i class="ace-icon fa fa-pencil bigger-100"></i>
</a>
<a class="red dept-delete" href="#" data-id="{{id}}" data-name="{{name}}">
<i class="ace-icon fa fa-trash-o bigger-100"></i>
</a>
</span>
</div>
</li>
{{/deptList}}
</ol>
</script>
2
// Click the Modify button to pop up the Modify modal dialog
$(".dept-edit").click(function(e){
e.preventDefault(); // intercept the default click event
e.stopPropagation(); // stop bubbling event
var deptId = $(this).attr("data-id"); // Get the value of the data-id of the current element
$("#dialog-dept-form").dialog({
model: true, // is it a modal dialog
title: "Editing Department",
// Initialize data, etc. when the dialog is opened
open: function(event, ui){
$(".ui-dialog-titlebar-close", $(this).parent()).hide(); // Cancel all default function buttons, the reason is that the related operations can be processed when closing, not just closing
optionStr = "<option value=\"0\">请选择</option>";
recursiveRenderDeptSelect(deptList, 1);
$("#deptForm")[0].reset(); // Reset the form, clear the form data
$("#parentId").html(optionStr); // 渲染到<select id="parentId"></select>中
$("#deptId").val(deptId); // Get the deptId information of the current department and fill in the input box
var targetDept = deptMap[deptId]; // According to deptId, retrieve from deptMap that stores all department information
if (targetDept) {
$("#parentId").val(targetDept.parentId);
$("#deptName").val(targetDept.name);
$("#deptSeq").val(targetDept.seq);
$("#deptRemark").val(targetDept.remark);
}
},
// buttons: The attribute name will be used as the prompt text of the button, and the attribute value is a function, that is, the processing function of the button
buttons:{
"更新":function(e){
e.preventDefault(); // intercept the default click event
// true is added, false is modified. The action successfully closes the modal.
updateDept(false,
function (data) {
$("#dialog-dept-form").dialog("close");
},
function (data) {
showMessage("Update Department", data.msg, false);
})
},
"取消":function(){ $("#dialog-dept-form").dialog("close");}
}
})
})