From 7a2a909edd1231e3348b46a571f6d5e51977f26f Mon Sep 17 00:00:00 2001 From: yubao Date: Sat, 2 Sep 2017 14:32:24 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4droptree=EF=BC=9B=20=E6=8F=90?= =?UTF-8?q?=E5=8F=96=E9=80=9A=E7=94=A8=E6=96=B9=E6=B3=95openauth.js?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- OpenAuth.Mvc/OpenAuth.Mvc.csproj | 1 + OpenAuth.Mvc/js/droptree.js | 146 +++++++++++++++++-------------- OpenAuth.Mvc/js/openauth.js | 48 ++++++++++ OpenAuth.Mvc/js/users.js | 21 ++--- 4 files changed, 137 insertions(+), 79 deletions(-) create mode 100644 OpenAuth.Mvc/js/openauth.js diff --git a/OpenAuth.Mvc/OpenAuth.Mvc.csproj b/OpenAuth.Mvc/OpenAuth.Mvc.csproj index 22238abd..6de16f26 100644 --- a/OpenAuth.Mvc/OpenAuth.Mvc.csproj +++ b/OpenAuth.Mvc/OpenAuth.Mvc.csproj @@ -175,6 +175,7 @@ + diff --git a/OpenAuth.Mvc/js/droptree.js b/OpenAuth.Mvc/js/droptree.js index d0a4b3ca..faf24ffc 100644 --- a/OpenAuth.Mvc/js/droptree.js +++ b/OpenAuth.Mvc/js/droptree.js @@ -9,30 +9,93 @@ // // 版权所有 玉宝(C) 2017 // -//单击文本框弹出的选择列表,可以多选。调用： layui.droptree("/UserSession/GetOrgs", "#Organizations", "#OrganizationIds"); -//如果想去掉layui，只需把layui.define改成一个普通的函数，最后的exports（xxx）改成一个闭包就行 +//单击文本框弹出的选择列表,可以多选。调用： +//var droptree = layui.droptree("/UserSession/GetOrgs", "#Organizations", "#OrganizationIds"); +// droptree.render(); // *********************************************************************** layui.define(['jquery', 'layer'], function (exports) { var $ = layui.jquery; var layer = layui.layer; - var options; var zTreeObj; - var setting; + var inst; //droptree实体 - var showMenu = function () { - $("#menuContent").css({ left: "10px", top: $(options.nameDOM).outerHeight() + "px" }).slideDown("fast"); + //构造器 + var Class = function (options) { + var that = this; + that.config = $.extend({}, that.config, options); + }; + //默认配置 + Class.prototype.config = { + text: 'Name', + key: 'Id', + parentKey: 'ParentId' + }; + + + //显示下拉菜单 + Class.prototype.showMenu =function () { + $("#menuContent").css({ left: "10px", top: $(this.config.nameDOM).outerHeight() + "px" }).slideDown("fast"); $("body").bind("mousedown", onBodyDown); }; - function hideMenu() { + + //隐藏下拉菜单 + Class.prototype.hideMenu =function () { $("#menuContent").fadeOut("fast"); $("body").unbind("mousedown", onBodyDown); } - var setCheck = function () { //设置初始选中的值 + //加载数据 + Class.prototype.render = function () { + var that = this; + var setting = { + view: { selectedMulti: true }, + check: { + enable: true, + chkStyle: "checkbox", + chkboxType: { "Y": "", "N": "" } //去掉勾选时级联 + }, + data: { + key: { + name: that.config.text, + title: that.config.text + }, + simpleData: { + enable: true, + idKey: that.config.key, + pIdKey: that.config.parentKey, + rootPId: 'null' + } + }, + callback: { + onClick: that.onClick, + onCheck: that.onCheck + } + }; + var index = layer.load(); + $.getJSON(this.config.url, + { + page: 1, rows: 10000 + }, + function (json) { + layer.close(index); + if (json.length == 0) { + $(this.config.nameDOM).val(''); + $(this.config.idDOM).val(''); + return; + } + zTreeObj = $.fn.zTree.init($("#org"), setting, json); + that.setCheck(); + zTreeObj.expandAll(true); + that.showMenu(); + }); + } + + //设置初始选中的值 + Class.prototype.setCheck = function () { zTreeObj.checkAllNodes(false); - var value = $(options.idDOM).val(); + var value = $(this.config.idDOM).val(); if (value == undefined) return; var nodeids = value.split(","); $.each(nodeids, @@ -44,23 +107,24 @@ layui.define(['jquery', 'layer'], function (exports) { }); } - function onClick(e, treeId, treeNode) { + + Class.prototype.onClick =function(e, treeId, treeNode) { var nodes = zTreeObj.getSelectedNodes(); for (var i = 0, l = nodes.length; i < l; i++) { - $(options.nameDOM).val(nodes[i].Name); - $(options.idDOM).val(nodes[i].Id); + $(inst.config.nameDOM).val(nodes[i].Name); + $(inst.config.idDOM).val(nodes[i].Id); break; } hideMenu(); } - function onCheck(e, treeId, treeNode) { + Class.prototype.onCheck= function(e, treeId, treeNode) { var nodes = zTreeObj.getCheckedNodes(true); var ids = nodes.map(function (e) { return e.Id; }).join(","); var names = nodes.map(function (e) { return e.Name; }).join(","); - $(options.nameDOM).val(names); - $(options.idDOM).val(ids); + $(inst.config.nameDOM).val(names); + $(inst.config.idDOM).val(ids); } function onBodyDown(event) { @@ -69,59 +133,13 @@ layui.define(['jquery', 'layer'], function (exports) { } } - var load = function () { - var index = layer.load(); - $.getJSON(options.url, - { - page: 1, rows: 10000 - }, - function (json) { - layer.close(index); - if (json.length == 0) { - $(options.nameDOM).val(''); - $(options.idDOM).val(''); - return; - } - zTreeObj = $.fn.zTree.init($("#org"), setting, json); - setCheck(); - zTreeObj.expandAll(true); - showMenu(); - }); - } - exports('droptree', function (url, name, id) { - options = { - text: 'Name', - key: 'Id', - parentKey: 'ParentId', + var options = { nameDOM: name, //显示的文本框ID，如："#catetoryName" idDOM: id, //隐藏的文本框，如："#categoryId" url: url } - setting = { - view: { selectedMulti: true }, - check: { - enable: true, - chkStyle: "checkbox", - chkboxType: { "Y": "", "N": "" } //去掉勾选时级联 - }, - data: { - key: { - name: options.text, - title: options.text - }, - simpleData: { - enable: true, - idKey: options.key, - pIdKey: options.parentKey, - rootPId: 'null' - } - }, - callback: { - onClick: onClick, - onCheck: onCheck - } - }; - load(); + inst = new Class(options); + return inst; }); }); \ No newline at end of file diff --git a/OpenAuth.Mvc/js/openauth.js b/OpenAuth.Mvc/js/openauth.js new file mode 100644 index 00000000..abcffeab --- /dev/null +++ b/OpenAuth.Mvc/js/openauth.js @@ -0,0 +1,48 @@ +/** + * Openauth通用工具库 + * yubaolee @ 2017 + * www.cnblogs.com/yubaolee + */ +layui.define(['jquery', 'layer'], function (exports) { + var $ = layui.jquery; + var layer = layui.layer; + //字符串常量 + var MOD_NAME = 'openauth', + THIS = 'layui-this', + SHOW = 'layui-show', + HIDE = 'layui-hide', + DISABLED = 'layui-disabled'; + + //外部接口 + var openauth = { + config: {} //全局配置项 + + //设置全局项 + , set: function (options) { + var that = this; + that.config = $.extend({}, that.config, options); + return that; + } + //事件监听 + , on: function (events, callback) { + return layui.onevent.call(this, MOD_NAME, events, callback); + } + + //删除 + , del: function (url, dataids, callback) { + layer.confirm('真的删除么', function (index) { + $.post(url, { ids: dataids }, + function (data) { + if (data.Status) { + if (callback != undefined) callback(); + } else { + layer.msg(data.Message); + } + }, "json"); + layer.close(index); + }); + } + } + + exports(MOD_NAME, openauth); +}); \ No newline at end of file diff --git a/OpenAuth.Mvc/js/users.js b/OpenAuth.Mvc/js/users.js index 21b8e410..e9e4a3b3 100644 --- a/OpenAuth.Mvc/js/users.js +++ b/OpenAuth.Mvc/js/users.js @@ -1,12 +1,13 @@ layui.config({ base: "/js/" -}).use(['form', 'ztree', 'layer', 'jquery', 'table','droptree'], function () { +}).use(['form', 'ztree', 'layer', 'jquery', 'table','droptree','openauth'], function () { var form = layui.form, - //layer = parent.layer === undefined ? layui.layer : parent.layer, - layer =layui.layer, + layer = (parent == undefined || parent.layer === undefined )? layui.layer : parent.layer, $ = layui.jquery; var dataurl = '/UserManager/Load'; var table = layui.table; + var openauth = layui.openauth; + var droptree = layui.droptree("/UserSession/GetOrgs", "#Organizations", "#OrganizationIds"); //左边树状机构列表 var ztree = function () { @@ -58,7 +59,7 @@ layui.config({ //上级机构选择框 $("#Organizations").on("click", function () { - layui.droptree("/UserSession/GetOrgs", "#Organizations", "#OrganizationIds"); + droptree.render(); }); //监听表格复选框选择 @@ -72,17 +73,7 @@ layui.config({ layer.msg('ID：' + data.Id + ' 的查看操作'); } else if (obj.event === 'del') { //删除 - layer.confirm('真的删除么', function (index) { - $.post("/UserManager/Delete", { ids: data.Id }, - function (data) { - if (data.Status) { - obj.del(); - } else { - layer.msg(data.Message); - } - },"json"); - layer.close(index); - }); + openauth.del("/UserManager/Delete", data.Id, obj.del); } else if (obj.event === 'edit') { layer.alert('编辑行：
' + JSON.stringify(data)); }