EasyUI 常规用法

简介: (function () {     // 获取树的路径,如 组织分类 > YHBH > 湖南省卫生厅 > 湖南省长沙市     var getBreadcrumbs = function (a) {         var node2 = $('#tt').

(function () {
    // 获取树的路径,如 组织分类 > YHBH > 湖南省卫生厅 > 湖南省长沙市
    var getBreadcrumbs = function (a) {
        var node2 = $('#tt').tree("getParent", a.target);
        return !!node2 ? getBreadcrumbs(node2) + " > " + a.text : a.text;
    };

    // 获取选中的树节点当前所处 Level
    var getNodeLevel = function (node) {
        var i = 1, parentNode;

        var getParent = function (node1) {
            parentNode = $("#tt").tree("getParent", node1.target);
            if (parentNode != null) {
                i++;
                getParent(parentNode);
            }
        };
        if (node == null) {
            return;
        }
        getParent(node);

        return i;
    };

    // 获取 DataGrid 的选中行们
    var getSelections = function () {
        return $("#dg").datagrid("getSelections");
    };

    window.Index = {
        getBreadcrumbs: getBreadcrumbs,
        getNodeLevel: getNodeLevel,
        getSelections: getSelections
    };

    var calcel = function () {
        $("#win").window("close");
    };

})();

 

/*
点击树的节点之后,获取数据,并填充 datagrid
注意,数据样例如下,
[{
    "OrgType": 1,
    "OrgTypeValue": null,
    "AuditProcess": "1,c93df86763504c2fa8226a6cf8ee9797,zhYHBJRole2|2,2e52574e7cf44c79b42bfa6f1d5b009c,zhYHBJRole1|3,9e3695dac51142ae8e7b3e963d924a32,zhYHBJRole6",
    "AuditProcesses": [{
        "ProcessId": 1,
        "RoleId": "c93df86763504c2fa8226a6cf8ee9797",
        "RoleName": "zhYHBJRole2"
    },
    "ReqCount": 0,
    "ReqIndex": 0
},

{
    "OrgType": 2,
    "OrgTypeValue": null,
    "AuditProcess": "1,2e52574e7cf44c79b42bfa6f1d5b009c,zhYHBJRole1|2,367c1816ea6946b4885755337378f8b3,zhYHBJRole3|3,cae20248433f419d8ad6ea43b7502403,zhYHBJRole5",
    "AuditProcesses": [{
        "ProcessId": 1,
        "RoleId": "2e52574e7cf44c79b42bfa6f1d5b009c",
        "RoleName": "zhYHBJRole1"
    },
    "ReqCount": 0,
    "ReqIndex": 0
}]
1:可以看到,该数据为数量为2的一个数组,存储为JSON
2:其后台代码为:
public JsonResult GetUserNotAuditOrg(string orgId)
{
    List<Organization> list = _organizationBll.GetNotAuditChild(orgId, user);
    return Json(list, JsonRequestBehavior.AllowGet);
}
*/
var treeNodeClick = function (node) {
    var path = getBreadcrumbs(node);
    $('#routeTitle').panel({
        title: "&nbsp;&nbsp;当前位置:组织分类 > " + path
    });

    $.ajax({
        type: "POST",
        url: "@ViewBag.Domain/Organization/GetUserNotAuditOrg?orgId=" + node.id,
        success: function (data) {
            var orgProcessJson = [];
            // 遍历 JSON 数组
            $.each(data, function (i, item) {
                var currentProcess = item.CurrentAuditProcess;
                var processes = "";
                // 如果某个元素的属性是数组,则能继续进行遍历处理
                $.each(item.AuditProcesses, function (j, jitem) {
                    if (currentProcess != null && currentProcess != "" && parseInt(currentProcess.split(",")[0]) == parseInt(jitem.ProcessId)) {
                        processes += "<span style='color: red'>" + jitem.RoleName + "</span>->";
                    } else {
                        processes += "<span>" + jitem.RoleName + "</span>->";
                    }
                });
                item.AuditProcess = processes == "" ? "" : processes.substring(0, processes.length - 2);
            });
            /* 直接加载 JSON 数组填充到 datagrid
               填充数据的另外一种做法,如下
                var rows = [];
                rows.push({ "name": "类别类型属性名称:", "value": levelName, "group": item.Name });
                rows.push({ "name": "类别类型属性值:", "value": levelDefine, "group": item.Name });
                rows.push({ "name": "文本类型属性名称:", "value": fieldName, "group": item.Name });
                $('#properEditGrid').propertygrid('loadData', rows);
               注意 columns 也可这样来实现,这应该可以解决按钮授权的表格的列动态生成的问题。

            */
            $('#orgGrid').datagrid('loadData', data);
        }
    });
};

$("#addtest").bind("click", function () {
    var selected, isLeaf, level;

    selected = $("#tt").tree('getSelected');
    if (selected == null) {
        $.messager.alert("提示", "请选择题库分类!", "info");
        return;
    }

    level = Index.getNodeLevel(selected);

    if (level <= 3) {
        $("#win").window("open");
        $("#win").window("refresh", "/Home/QuestionCategoryAdd");
    }
});

$("#edittest").bind("click", function () {
    var rows, rowsCount;
    rows = Index.getSelections();
    rowsCount = rows.length;
    if (rowsCount > 1) {
        $.messager.alert("提示", "一次只能编辑一条数据!", "info");
        return;
    }
    if (rowsCount == 0) {
        $.messager.alert("提示", "请选择要编辑的数据!", "info");
        return;
    }
    $("#win").window("open");
    $("#win").window("refresh", "/Home/QuestionCategoryAdd?categoryId=" + rows[0].Id + "&categoryName=" + rows[0].Name);
});

$("#removetest").bind("click", function () {
    $.messager.confirm("提示", "您确定" + sourceNode.text + "要复制到" + targetNode.text + "目录下吗?", function (flag) {
        if (flag) {
        }
    });
});

$("#savetest").bind("click", function () {
    $.messager.prompt("提示", "请输入名称.");
});

另外,提供几个常用的帮助方法:

function JsonToDate(value) {
    var data = value;
    var date = new Date(parseInt(data.replace("/Date(", "").replace(")/", ""), 10));
    var result = date.getFullYear() + "-" + (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-" + (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " " + (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":" + (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) + ":" + (date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds());
    return result;
}

function secondToTime(value) {
    return [parseInt(value / 60 / 60), parseInt(value / 60 % 60), value % 60].join(":").replace(/\b(\d)\b/g, "0$1");

}

function arrayToJson(o) {
    var r = [];
    if (typeof o == "string") return "\"" + o.replace(/([\'\"\\])/g, "\\$1").replace(/(\n)/g, "\\n").replace(/(\r)/g, "\\r").replace(/(\t)/g, "\\t") + "\"";
    if (typeof o == "object") {
        if (!o.sort) {
            for (var i in o)
                r.push(i + ":" + arrayToJson(o[i]));
            if (!!document.all && !/^\n?function\s*toString\(\)\s*\{\n?\s*\[native code\]\n?\s*\}\n?\s*$/.test(o.toString)) {
                r.push("toString:" + o.toString.toString());
            }
            r = "{" + r.join() + "}";
        } else {
            for (var i = 0; i < o.length; i++) {
                r.push(arrayToJson(o[i]));
            }
            r = "[" + r.join() + "]";
        }
        return r;
    }
    return o.toString();
}

Creative Commons License本文基于 Creative Commons Attribution 2.5 China Mainland License发布,欢迎转载,演绎或用于商业目的,但是必须保留本文的署名 http://www.cnblogs.com/luminji(包含链接)。如您有任何疑问或者授权方面的协商,请给我留言。
目录
相关文章
|
6月前
|
JavaScript 前端开发 CDN
jquery的书写格式,简单的使用方法
jquery的书写格式,简单的使用方法
91 4
|
6月前
|
前端开发
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
|
11月前
|
JavaScript
jQuery学习(十一)— 常用的删除方法
jQuery学习(十一)— 常用的删除方法
|
JavaScript
js基础笔记学习240通过属性读取样式1
js基础笔记学习240通过属性读取样式1
68 0
js基础笔记学习240通过属性读取样式1
|
JavaScript
js基础笔记学习241通过属性读取样式2
js基础笔记学习241通过属性读取样式2
61 0
js基础笔记学习241通过属性读取样式2
uiu
|
前端开发 JavaScript 编译器
【Svelte】-(1)基础知识 / 快速上手 / 添加数据 / 动态属性 / CSS样式 / 嵌套组件 / HTML标签
【Svelte】-(1)基础知识 / 快速上手 / 添加数据 / 动态属性 / CSS样式 / 嵌套组件 / HTML标签
uiu
303 0
【Svelte】-(1)基础知识 / 快速上手 / 添加数据 / 动态属性 / CSS样式 / 嵌套组件 / HTML标签
|
存储 前端开发 程序员
【网页前端】CSS样式表入门概述以及基本语法格式和选择器
【网页前端】CSS样式表入门概述以及基本语法格式和选择器
184 0
【网页前端】CSS样式表入门概述以及基本语法格式和选择器
|
存储 前端开发 JavaScript
前端 CSS 变量简介及基本使用方法
复杂的网站都会有大量的CSS代码,通常也会有许多重复的值。
198 0
前端 CSS 变量简介及基本使用方法
|
JavaScript 前端开发 数据格式
easyui的一些使用方法
版权声明:转载请注明作者及出处,否则将追究法律责任。 https://blog.csdn.net/q2158798/article/details/79310258 1.
1506 0
|
前端开发
css的高级用法
模糊背景图片(:before) 类似这样的效果 之前 、 之后 重点注意:颜色的变化,之后的图片相比之前的好像更暗淡一些 banner放置类似上面的图片 .
838 0