基于easyUI实现组织结构树图形
Posted 大饼酥
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基于easyUI实现组织结构树图形相关的知识，希望对你有一定的参考价值。
此文章是基于 EasyUI+Knockout实现经典表单的查看、编辑
一. 相关文件介绍
1. organize.jsp：组织结构树的主界面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>组织结构树</title> <%@ include file="/common/head.jsp"%> </head> <body> <div class="toolbar"> <a href="#" plain="true" class="easyui-linkbutton" icon="icon-arrow_refresh" title="刷新" data-bind="click:refreshClick">刷新</a> <a href="#" plain="true" class="easyui-linkbutton" icon="icon-add" title="新增" data-bind="click:addClick">新增</a> <a href="#" plain="true" class="easyui-linkbutton" icon="icon-edit" title="编辑" data-bind="click:editClick" >编辑</a> <a href="#" plain="true" class="easyui-linkbutton" icon="icon-cross" title="删除" data-bind="click:deleteClick">删除</a> <a href="#" plain="true" class="easyui-linkbutton" icon="icon-group" title="设置角色" data-bind="click:roleClick">设置角色</a> </div> <div id="gridlist" class="wrapper" style="width: 100%; height: 100%; margin-top:15px;"></div> <script type="text/html" id="edit-template"> <div class="container_16" style="width:90%;margin:5%;"> <div class="grid_3 lbl" >上级机构</div> <div class="grid_13 val" ><input class="txtBox" data-bind="easyuiCombotree:combotree,combotreeValue:form.parentId" /></div> <div class="grid_3 lbl">机构名称</div> <div class="grid_13 val"><input class="txtBox easyui-validatebox" style="width:220px;" data-bind="value:form.organizeName" data-options="required:true,validateOnCreate:false,validateOnBlur:true" /></div> <div class="grid_3 lbl">备注</div> <div class="grid_13 val"><textarea class="txtBox" style="width:220px;height:50px;" data-bind="value:form.description" ></textarea></div> <div class="clear"></div> </div> <div style="text-align:center;"> <a class="easyui-linkbutton" data-options="iconCls:\'icon-ok\'" data-bind="click:confirmClick" href="javascript:void(0)" >确定</a> <a class="easyui-linkbutton" data-options="iconCls:\'icon-cancel\'" data-bind="click:cancelClick" href="javascript:void(0)">取消</a> </div> </script> <script type="text/html" id="setrole-template"> <style type="text/css"> .listview{ margin:0 !important;} .listview li{width:100px !important;background-color:skyblue !important;float:left;margin:3px;} </style> <div style="margin:5px;height:370px;overflow:auto;" > <div style="border-bottom:1px solid #CCC; margin-bottom:5px;"> <span class="icon32 icon-org32" style="padding-left:48px;font-weight:bold; font-size:14px;color:#666;" data-bind="text:organizeName">机构名称</span> </div> <div> 拥有角色(请点击勾选)：</div> <div class="metrouicss"> <ul class="listview"></ul> </div> </div> <div style="text-align:center;"> <a class="easyui-linkbutton" data-options="iconCls:\'icon-ok\'" data-bind="click:confirmClick" href="javascript:void(0)" >确定</a> <a class="easyui-linkbutton" data-options="iconCls:\'icon-cancel\'" data-bind="click:cancelClick" href="javascript:void(0)">取消</a> </div> </script> <%@ include file="/common/foot.jsp"%> <script type="text/javascript" src="viewModel/sys/organize.js"></script> <script type="text/javascript" src="viewModel/sys/organizeTreeGraph.js"></script> <script type="text/javascript"> var data = ${data}; ko.bindingViewModel(new viewModel()); using([\'dialog\',\'combotree\',\'messager\']) </script> </body> </html>
2. organize.js：实现界面按钮的功能
function viewModel() { var self = this; this.refreshClick = function () { window.location.reload(); }; this.save = function (vm,win) { var post = { form: ko.toJS(vm.form) }; com.ajax({ type: \'POST\', url: rootPath+\'/sys/organize!edit.do\', data: JSON.stringify(post), success: function (d) { com.message(\'success\', \'保存成功！\'); win.dialog(\'close\'); window.location.reload(); } }); } this.addClick = function () { var defaults = { parentId: (self.selectNode || {}).id || 0 }; self.openDiloag("添加新机构", defaults, function (vm, win) { if (com.formValidate(win)) { vm.form._id = vm.form.id(); self.save(vm,win); } }); }; this.editClick = function () { if (!self.selectNode) return com.message(\'warning\', \'请先选择一个机构！\'); self.openDiloag("编辑机构-"+self.selectNode.organizeName,self.selectNode, function (vm, win) { if (com.formValidate(win)) { self.save(vm,win); } }); }; this.deleteClick = function () { if (!self.selectNode) return com.message(\'warning\', \'请先选择一个机构！\'); if (utils.isNotEmpty(self.selectNode.children)) return com.message(\'warning\', \'请先删除子机构！\'); com.message(\'confirm\', \'确认要删除选中的机构吗？\', function (b) { if (b) { com.ajax({ type: \'DELETE\', url: rootPath+\'/sys/organize!delete.do?id=\' + self.selectNode.id, success: function (d) { com.message(\'success\', \'删除成功！\'); window.location.reload(); } }); } }); }; this.roleClick = function () { if (!self.selectNode) return com.message(\'warning\', \'请先选择一个机构！\'); com.dialog({ title: "设置角色", width: 600, height: 450, html: "#setrole-template", viewModel: function (w) { var thisRole = this; this.organizeName = ko.observable(self.selectNode.organizeName); com.loadCss(rootPath+\'/content/css/metro/css/modern.css\', parent.document); com.ajax({ type: \'GET\', url: rootPath+\'/sys/role!getRoleWithOrganizeCheck.do?organizeId=\' + self.selectNode.id, success: function (d) { var ul = w.find(".listview"); for (var i in d) ul.append(utils.formatString(\'<li role="{0}" class="{2}">{1}</li>\', d[i].id, d[i].roleName, d[i].checked == \'true\' ? \'selected\' : \'\')); ul.find("li").click(function () { if ($(this).hasClass(\'selected\')) $(this).removeClass(\'selected\'); else $(this).addClass(\'selected\'); }); } }); this.confirmClick = function () { var roles = []; w.find("li.selected").each(function () { roles.push({ id: $(this).attr(\'role\') }); }); com.ajax({ url: rootPath+\'/sys/role!editOrganizeRoles.do?organizeId=\' + self.selectNode.id, data: ko.toJSON(roles), success: function (d) { thisRole.cancelClick(); com.message(\'success\', \'保存成功！\'); } }); }; this.cancelClick = function () { w.dialog(\'close\'); }; } }); }; this.openDiloag = function (title,node,fnConfirm) { com.dialog({ title: title, height: 250, width: 400, html: "#edit-template", viewModel: function (w) { var that = this; this.combotree = { width:228, data: self.combotreeData, onBeforeSelect: function (node) { var isChild = utils.isInChild(self.combotreeData, that.form._id, node.id); com.messageif(isChild, \'error\', \'不能将自己或下级设为上级机构\'); return !isChild; } }, this.form = { _id:node.id, parentId: ko.observable(node.parentId), id: ko.observable(node.id), organizeName: ko.observable(node.organizeName), description: ko.observable(node.description) }; this.confirmClick = function () { fnConfirm(this,w); }; this.cancelClick = function () { w.dialog(\'close\'); }; } }); }; this.initTreeData = function () { var list = utils.filterProperties(data, [\'id as id\', \'parentId as pid\', \'organizeName as text\']); var treeData = utils.toTreeData(list, "id", "pid", "children"); treeData.unshift({ "id": 0, "text": "==请选择==" }); self.combotreeData = treeData; }; this.initGraph = function (data) { self.data = data; var wrapper = $("div.wrapper").empty(); var treeData = utils.toTreeData(data, "id", "parentId", "children"); var tb = renderTreeGraph(treeData); tb.appendTo(wrapper)以上是关于基于easyUI实现组织结构树图形的主要内容，如果未能解决你的问题，请参考以下文章