easyui 使用 mark

原创 2015年11月21日 20:43:34





1、异步树的生成,后台返回的json数据 带有 id、text
            $(function () {
                var $tree = $("#orgTree");
                var treeUrl = "../../OrgCURD/GetOrgTree";
                $("#orgTree").tree({
                    lines: true,
                    url: treeUrl,
                    onBeforeExpand: function (node) {
                        $tree.tree("options").url = treeUrl + "?id=" + node.id;
                    },
                    onSelect: function (node) {
                        queryUserLst(node.id);

                        if (node.state === "closed") {//选中时进行折叠与展开
                            $tree.tree("expand", node.target);
                            node.state = "open";
                        }
                        else {
                            $tree.tree("collapse", node.target);
                            node.state = "closed";
                        }

                    }
                });
            });





2、js控制datagrid的列显示与隐藏

    EasyLib.Ctl.SetDataGridColumn = function (dict) {

        var $row1 = $(".datagrid-view > div").last().find(".datagrid-header .datagrid-header-row").first();
        var $row2 = $(".datagrid-view > div").last().find(".datagrid-header .datagrid-header-row").last();
        var $btable = $(".datagrid-view > div").last().find(".datagrid-body .datagrid-btable");

        //格线第1行
        if ($row1.length) {

            //统计合并列数据
            var colspanArr = [];
            for (var i = 0; i < $row1.find("td").length; i++) {
                var $td = $row1.find("td:eq(" + i + ")");
                var colspan = $td.attr("colspan");
                if ($td.attr("colspan")) {
                    colspanArr.push(Number(colspan));
                }
                else {
                    colspanArr.push(1);
                }
            }

            //根据指定索引计算第1行的真实索引
            var Row1StartIndex = -1;
            var Row1EndIndex = -1;
            if (Row1StartIndex === -1) {
                if (dict.StartIndex === 0) {
                    Row1StartIndex = 0;
                }
                else {
                    var TotalIndex = 0;
                    for (var i = 0; i < colspanArr.length; i++) {
                        TotalIndex += colspanArr[i];
                        if (TotalIndex >= dict.StartIndex) {
                            Row1StartIndex = i + 1;
                            break;
                        }
                    }
                }
            }
            if (Row1EndIndex === -1) {
                if (dict.EndIndex === -1) {
                    Row1EndIndex = $row1.find("td").length - 1;
                }
                else {
                    var TotalIndex = 0;
                    for (var i = 0; i < colspanArr.length; i++) {
                        TotalIndex += colspanArr[i];
                        if (TotalIndex > dict.EndIndex) {
                            Row1EndIndex = i;
                            break;
                        }
                    }
                }
            }

            for (var i = Row1StartIndex; i <= Row1EndIndex; i++) {
                if (dict.Visibility === "show") {
                    $row1.find("td:eq(" + i + ")").show();
                }
                else if (dict.Visibility === "hide") {
                    $row1.find("td:eq(" + i + ")").hide();
                }
            }

        }

        if (dict.EndIndex === -1) {//当结束索引为-1时的处理
            dict.EndIndex = $row2.find("td").length
            if ($(".datagrid-td-rownumber").length) {//是否显示序号
                dict.EndIndex = dict.EndIndex + 1;
            }
            dict = dict;
        }
        //格线第2行
        if ($row2.length) {
            for (var i = dict.StartIndex; i <= dict.EndIndex; i++) {
                if (dict.Visibility === "show") {
                    $row2.find("td:eq(" + i + ")").show();
                }
                else if (dict.Visibility === "hide") {
                    $row2.find("td:eq(" + i + ")").hide();
                }
            }
        }

        //格线具体内容
        if ($btable.length) {
            var fieldArr = [];
            for (var i = 0; i < $btable.find("tr").first().find("td").length; i++) {
                fieldArr.push($btable.find("td:eq(" + i + ")").attr("field"));
            }

            for (var i = dict.StartIndex; i <= dict.EndIndex; i++) {
                if (dict.Visibility === "show") {
                    $("[field='" + fieldArr[i] + "']").show();
                }
                else if (dict.Visibility === "hide") {
                    $("[field='" + fieldArr[i] + "']").hide();
                }
            }
        }
    }






3、js获取datagrid对象 生成table字符串


EasyLib.Ctl.GetDataGridColumn = function ($obj) {
        var result = '<table cellspacing="0">';

        var frozenColumns = $obj.datagrid("options").frozenColumns;//得到frozenColumns对象
        var columns = $obj.datagrid("options").columns;//得到columns对象
        var rows = $obj.datagrid("getRows");//得到记录行对象
        var nameList = new Array();

        // 载入title
        $(columns).each(function (index) {
            result += '<tr>';
            if (frozenColumns && frozenColumns[index]) {//冻结列
                for (var i = 0; i < frozenColumns[index].length; ++i) {
                    if (!frozenColumns[index][i].hidden) {
                        result += '<th width="' + frozenColumns[index][i].width + '"';
                        if (frozenColumns[index][i].rowspan) {
                            result += ' rowspan="' + frozenColumns[index][i].rowspan + '"';
                        }
                        if (frozenColumns[index][i].colspan) {
                            result += ' colspan="' + frozenColumns[index][i].colspan + '"';
                        }
                        if (frozenColumns[index][i].field) {
                            nameList.push(frozenColumns[index][i]);
                        }
                        result += '>' + (frozenColumns[0][i].title ? frozenColumns[0][i].title : "") + '</th>';
                    }
                }
            }
            else {
                for (var i = 0; i < columns[index].length; ++i) {//非冻结列
                    if (!columns[index][i].hidden) {
                        result += '<th width="' + columns[index][i].width + '"';
                        if (columns[index][i].rowspan) {
                            result += ' rowspan="' + columns[index][i].rowspan + '"';
                        }
                        if (columns[index][i].colspan) {
                            result += ' colspan="' + columns[index][i].colspan + '"';
                        }
                        if (columns[index][i].field) {
                            nameList.push(columns[index][i]);
                        }
                        result += '>' + (columns[index][i].title ? columns[index][i].title : "") + '</th>';
                    }
                }
            }
            result += '</tr>';
        });

        // 载入内容
        for (var i = 0; i < rows.length; ++i) {
            result += '<tr>';
            for (var j = 0; j < nameList.length; ++j) {
                var e = nameList[j].field.lastIndexOf('_0');

                result += '<td';
                if (nameList[j].align) {
                    result += ' style="text-align:' + nameList[j].align + ';"';
                }
                result += '>';
                if (e + 2 == nameList[j].field.length) {
                    result += rows[i][nameList[j].field.substring(0, e)];
                }
                else {
                    result += rows[i][nameList[j].field];
                }
                result += '</td>';
            }
            result += '</tr>';
        }
        result += '</table>';
        return result;
    }


版权声明:本文为博主原创文章,未经博主允许不得转载。

Vim插件自定义-mark.vim修改搜索匹配热键

最近换了一把87键的机械键盘,vim中原来有一个很好用的插件,mark.vim不能用了,因为87键的键盘没有小键盘,导致我只能标记但是没法搜索,尝试了很多办法,后来在同事的帮助下,修改插件,可以自定义...
  • swordiel
  • swordiel
  • 2015年12月27日 22:03
  • 1137

EasyUI的简单使用

ext 和easyui 都算是JS框架吧,不同的是easyui 是基于JQUERY 的。这两个东西做出来的页面都还算比较好看,至少比我折腾出来的页面好看,个人认为,如果是做项目,给某个企业做东西,还是...
  • kongxiangli
  • kongxiangli
  • 2013年03月13日 11:48
  • 23031

EasyUI入门:如何引入及简单使用

也许,只有当做比较大的项目的时候,才会发现封装好的东西会为程序猿们带来多少方便。合作开发的时候更应该强调复用,才能更加发挥团队的优势。         今天使用了一些EasyUI,发现很wonde...
  • lhc2207221755
  • lhc2207221755
  • 2014年11月14日 15:56
  • 5440

easyui 中datagrid的使用方法

由于使用datagrid主要是和数据打交道,所以为了方便就用了js的方式创建数据表格 ...
  • jimscx
  • jimscx
  • 2015年06月03日 23:51
  • 995

easyui 的使用

这几天搞了一下easyUI 的东西,感觉自己学习效率还是很高的,已经迅速完成了任务,废话不多说,总结一下吧,不要做完就忘记了! 要使用easyui 首先要先引入相应的jar包,而且要注意引入的顺...
  • u013303551
  • u013303551
  • 2016年07月09日 19:19
  • 3380

cv1.1 找mark点以及分水岭算法

分水岭算法实现分割 分水岭分割方法,是一种基于拓扑理论的数学形态学的分割方法,其基本思想是把图像看作是测地学上的拓扑地貌,图像中每一点像素的灰度值表示该点的海拔高度,每一个局部极小值及其影响区域称为集...
  • q123456789098
  • q123456789098
  • 2016年04月13日 10:42
  • 5548

EasyUI学习-如何使用jQuery EasyUI?

1、 使用步骤 ①  在项目的WebRoot目录下创建js文件夹,导入easy-ui的js包; ②  在HTML页面引入easy ui 的js文件; ③  编写相应的HTML代码与JS代码...
  • KnightKitt
  • KnightKitt
  • 2014年08月17日 15:38
  • 982

关于IPTABLES 各种MARK 功能的用法

1、 iptalbes 的有多个MARK 模块..用法各不相同..一直没有完全明白..希望高手解释一下各功能的使用及区别.... -m mark -m connmark -j MARK -j CONN...
  • bytxl
  • bytxl
  • 2015年04月03日 15:03
  • 5758

jQuery EasyUI使用教程使用Ajax提交表单

本教程主要展示如何使用easyui提交表单。我们创建一个带有name、email和phone字段的表单,通过使用easyui表单插件来将表单更改为ajax表单。表单提交所有的字段到后台服务器,服务器处...
  • AABBbaby
  • AABBbaby
  • 2016年08月17日 09:52
  • 1874

EasyUI在项目中的相关使用

最近项目是采用Easyui作为前端页面,正好此次前端页面由我来编写,在这总结部分使用方法及技术,同时还有相关的JS控制代码,在这里只是实用技巧,如果需要更详细的情况,需要去查看API文档  http:...
  • dsiori
  • dsiori
  • 2017年03月22日 17:20
  • 762
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:easyui 使用 mark
举报原因:
原因补充:

(最多只允许输入30个字)