easyui treegrid 封装（不用分页，用加载更多按钮）延迟加载加加载更多

来源：互联网发布：格林内尔学院知乎编辑：程序博客网时间：2024/06/07 15:52

Js代码
/**
* @author wsf数据加载
*/
;
var intervalId = null;
(function (win,$){
    $.myCache = {
            dataCache : {},//数据缓存
            domOperCache:{}//dom操作缓存
    }
    /**
     * js执行时间测试
     */
    function test(fn,param){
        var s,d;
        s = new Date().getTime();
        fn(param);
        d = new Date().getTime();
        console.log('程序耗时：' + (d-s)/1000 + '秒');
    }
    /**
     * 检测屏幕分辨率
     */
    function screenWH() {
          var w=screen.width;
          var h=screen.height;
          return {sw:w,sh:h};
    }
    /**
     * 自定义加载方法
     /
    $.myLoader = function (){
        var swh = screenWH();//计算屏幕分辩率
        var is1024 = swh.sw == 1024;//是否是1024768
        var w = ((swh.sw - 280)/6)-10;//计算过后的宽度
        this.page = "1";//初始分页参数
        this.rows = "50";//初始分页参数
        this.paramSearchPage = "1";//带参数查询分页
        this.paramSearchRows = "5";//带参数查询分页
        this.prevLoadPage = "1";//预先加载分页
        this.prevLoadRows = "5";//预先加载分页
        this.defaultLoadUrl = "/queryListLazy.do?";//初始化加载url
        this.paramLoadUrl = "/queryList.do?";//参数加载url
        this.searchType = "default";//默认为无参数搜索
        this.columns = [
                            {field:'FULLNAME',title:"客户全称",width:280,sortable:true},
                            {field:'SHORTNAME',title:'客户简称',width:w,sortable:true},
                            {field:'ECNNAME',title:'经济类型',width:w},
                            {field:'IDYNAME',title:'行业分类',width:w},
                            {field:'ZONNZME',title:'国家',width:w},
                            {field:'PROVNAME',title:'地区',width:w},
                            {field:'FN_DT',title:'成立日期',width:w},
                            {field:'HIGHTLIGHT',title:'是否高亮',hidden:true},
                            {field:'INST_ICN_NM',title:'logo名',hidden:true},
                            {field:'MAIN_BSN_MKT_LOT',title:'行业排名',hidden:true},
                            {field:'LGL_RPRT_NM',title:'董事长',hidden:true},
                            {field:'SNR_MGR_NM',title:'总经理',hidden:true}
                    ]
    }
    /**
     * 原型对象
     */
    $.myLoader.prototype = {
            constructor:$.myLoader,//构造函数
            /**
             * 公共渲染方法
             */
            commonRender:function (data,flag){
                var that = this;//防止this转变
                $("#content").treegrid({
                    //pagination:true,
                    animate:true,
                    collapsible:true,
                    fitColumns:true,
                    idField:'id',
                    treeField:'FULLNAME',
                    columns:[that.columns],
                    //展开前
                    onBeforeExpand:function (row){
                        that.gridBeforeExpand.apply(that,arguments);
                    },
                    //展开后
                    onExpand:function (row){
                        that.gridExpanded.apply(that,arguments);
                    },
                    //加载成功后
                    onLoadSuccess:function (row,data){
                        that.gridLoadSuccess.apply(that,arguments);
                    },
                    //双击行
                    onDblClickRow:function (){
                        that.dbClickRow.apply(that,arguments);
                    }
                });

                $('#content').treegrid('loadData',data);//渲染数据
                if(typeof flag == 'boolean'){
                }
            },
            /**
             * 初始进来加载
             */
            defaultLoad:function (data){
                this.commonRender(data,true);
                this.gridPagination();//设置分页bar
                this.changeGridStyle();//自定义样式
            },
            /**
             带参数加载
             /
            paramLoad:function (data){
                $('#content').treegrid('loadData',data);//渲染数据
                this.gridPagination();//设置分页bar
                this.changeGridStyle();//自定义样式
            },
            /**
             * 动态添加行
             */
            addRow:function (){
                var s,e;
                s = new Date().getTime();
                var that = this;
                var flag = this.searchType == "default";
                var _rowd = null;
                if(!flag){
                    _rowd = that.getParamSearchPageData();//有参数搜索
                }else{
                    _rowd = that.getPreLoadPageData();//无参数搜索
                }
                var i = 0 ,len = _rowd.length;
                if(len>0){
                    showNoImgMyLoading();
                    that.timeid = setTimeout(function (){
                        do{
                            var row = _rowd[i++];
                            var parentid = row._parentId;//父节点
                            $('#content').treegrid('append',{
                                parent:parentid,
                                data:[row]
                            });//添加行
                            if(i==len-1){
                                e = new Date().getTime();
                                console.log('程序耗时：' + (e-s)/1000 + '秒');
                            }
                        }while(i<len);
                        that.afterAppendRow.apply(that,arguments);
                    },100);
                }
            },
            /**
             * 添加行
             */
            appendRow:function (){

            },
            /**
             * 改变默认图标(添加行后)
             */
            afterAppendRow:function (){
                clearTimeout(this.timeid);
                closeLoading();
                var flag = (this.searchType == "default") && (this.rows/this.prevLoadRows == this.prevLoadPage);
                if(flag)
                   this.prevLoad();//预先加载
            },
            /**
             * 获得预先加载分页数据
             /
            getPreLoadPageData:function (){
                var rowData = $.myCache.dataCache["preLoadData"].rows;
                var page  = this.prevLoadPage;
                var pageSize = this.prevLoadRows;
                var start = pagepageSize-pageSize;
                var end = start+pageSize*1;
                this.prevLoadPage++;
                return rowData.slice(start,end);
            },
            /**
             * 带参数分页（前台）
             /
            getParamSearchPageData:function (){
                var _d = $.myCache.dataCache["paramData"].rows;
                var page = this.paramSearchPage;//当前页
                var pageSize = this.paramSearchRows;
                var start = pagepageSize-pageSize;
                var end = start+pageSize*1;
                this.paramSearchPage++;
                return _d.slice(start,end);
            },
            /**
             * grid展开事件
             */
            gridBeforeExpand:function (){
                var row = arguments[0];
                var _event = event||widow.event;
                var _target = _event.target||_event.srcElement;
                var _tr = $(_target).parents("tr");
                var isOpended = this.getDomOperCache(row.id);
                if(typeof isOpended != 'undefined'){
                }else{
                    this.expandTar = _tr;//鼠标点击了哪一行
                    //动态设置展开查询的url
                    var url = "/citics.crm/customerwidget/queryListLazy.do?parentId="+row.id;
                    $("#content").treegrid("options").url = url;
                }
                return true;
            },
            /**
             * grid展开后事件
             */
            gridExpanded:function (){
                var row = arguments[0];
                var _tr = this.expandTar;
                var isOpended = this.getDomOperCache(row.id);
                if(typeof isOpended != 'undefined'){
                }else{
                    //this.changeTreeIcon(_tr.next());//修改icon小图标
                    this.setDomOperCache(row.id,"alreadyOpened");//已经点开过
                }
            },
            /**
             * 设置分页控件
             */
            gridPagination:function (){
                var that = this;
                //设置分页控件
                var page = $('#content').treegrid('getPager');
                var opts = $('#content').treegrid('options');
                $(page).pagination({
                    pageSize: 10,//每页显示的记录条数，默认为10
                    pageList: [5,10,15],//可以设置每页记录条数的列表
                    beforePageText: '第',//页数文本框前显示的汉字
                    afterPageText: '页    共 {pages} 页',
                    displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',
                    onBeforeRefresh:function(){
                    },
                    onSelectPage: function (pageNumber, pageSize) {
                        opts.pageNumber = pageNumber;
                        opts.pageSize = pageSize;
                        that.page = pageNumber;//更新当前页
                        that.loader({page:pageNumber+"",rows:that.rows+""},0,true);
                    }
                });
            },
            /**
             * 前台分页
             /
            pagerFilter:function (data){
                var data = arguments[0];
                var dg = $(this);
                var state = dg.data('treegrid');
                var opts = dg.treegrid('options');
                var pager = dg.treegrid('getPager');
                pager.pagination({
                    onSelectPage:function(pageNum, pageSize){
                        opts.pageNumber = pageNum;
                        opts.pageSize = pageSize;
                        pager.pagination('refresh',{
                            pageNumber:pageNum,
                            pageSize:pageSize
                        });
                        dg.treegrid('loadData',data);
                    }
                });
                if (!data.topRows){
                    data.topRows = [];
                    data.childRows = [];
                    for(var i=0; i<data.rows.length; i++){
                        var row = data.rows[i];
                        row._parentId ? data.childRows.push(row) : data.topRows.push(row);
                    }
                    data.total = (data.topRows.length);
                }
                var start = (opts.pageNumber-1)parseInt(opts.pageSize);
                var end = start + parseInt(opts.pageSize);
                data.rows = $.extend(true,[],data.topRows.slice(start, end).concat(data.childRows));
                return data;
            },
            /**
             * grid加载完成后
             */
            gridLoadSuccess:function (){
            },
            /**
             * 添加dom操作缓存
             * @param dom
             * @param flag
             */
            setDomOperCache:function (dom,flag){
                var _cache = $.myCache.domOperCache;
                _cache[dom] = flag;
            },
            /**
             * 获取dom操作缓存
             * @param dom
             * @param flag
             */
            getDomOperCache:function (dom){
                var _cache = $.myCache.domOperCache;
                return _cache[dom];
            },
            /**
             * 自定义修改grid样式
             */
            changeGridStyle:function (){
                this.changeGridHead();//改变表头样式
                this.changeGridFooter();//表脚样式
                if(typeof G_LIST == "boolean"){
                    //搜索列表（固定表头）
                    this.fixTh();//锁定表头
                    this.fixTbody();//锁定表体
                }
                //hightSearchedTr();//高亮显示与搜索条件相关的tr
            },
            /**
             * 改变表头样式
             */
            changeGridHead:function (){
                var gridHead = $(".datagrid-header");
                var gridHeadInner = $(".datagrid-header-inner");
                //grid头
                gridHead.css({
                    'background-image' : 'none',
                    'background-color' : '#ccddff',
                    'font-weight' : '900',
                    "border-left":"1px solid lightblue",
                    "border-right":"1px solid lightblue",
                    "border-top":"1px solid lightblue"
                });
                gridHeadInner.css('background-color','#ccddff');
            },
            /**
             * 改变表脚样式
             */
            changeGridFooter:function (){
                var gridFooter = $(".pagination");
                //grid表脚
                gridFooter.css({
                    'background-image' : 'none',
                    'background-color' : '#ccddff',
                });
            },
            /**
             * 改变grid样式（表体）
             */
            changeGridBody:function () {
                $("td").css({
                    "border-right":"none",
                    "border-bottom":"1px dotted lightblue"
                });
                $(".datagrid-body,.datagrid-wrap").css({
                    "border-color":"lightblue",
                    "border-bottom":"none",
                    "border-top":"none",
                });
                $("#expandBtn").click();//默认收起tree
            },
            /**
             * 设置grid高度
             /
            resizeGrid:function (){
                var _h = $(".datagrid-body > table > tbody > tr").filter(".datagrid-row").length25;//
                $(".datagrid-wrap,.datagrid-view").height(_h);
            },
            /**
             * 自定义tree图标
             /
            /
            changeTreeIcon:function (tar){
                var folder,file;
                if(!tar){
                    //整个表格
                    folder = $(".tree-folder");
                    file = $(".tree-file");
                }else{
                    //指定行
                    folder = tar.find(".tree-folder");
                    file = tar.find(".tree-file");

                }
                folder.css({
                    "background-image":"url(/citics.crm/modules/customerwidget/images/user_add.png)",
                    "background-position":"0"
                });
                file.css({
                    "background-image":"url(/citics.crm/modules/customerwidget/images/user.png)",
                    "background-position":"0"
                });
            },*/
            /**
             * 锁定表头
             */
            fixTh:function (){
                var th = $(".datagrid-header");//表头
                var _top = $("#headWraper").height();
                setTimeout(function (){
                    var innerTop = $("#headWraper").height();
                    if(_top == innerTop){
                        th.css({
                            "position":'fixed',
                            "top":_top+"px"
                        });
                    }
                },200);
            },
            /**
             * 定位grid位置
             */
            fixTbody:function (){
                $(".datagrid").css("margin-top",($("#headWraper").height()+18)+"px");
            },
            /**
             * 双击行
             */
            dbClickRow:function (){
                var row = arguments[0];
                if(row) {
                    //客户组件客户双击
                    var param = {};
                    param["bpno"] = null;
                    param["custid"] = row.id;//客户主键
                    param["fullName"] = row.FULLNAME;//客户名称
                    win.singleViewParam = param;//传入单一视图的参数
                    win.open("/citics.crm/modules/customerwidget/singleview/singleview.jsp","_blank");
                }else{
                    alert("请选择一行进行修改!");
                    return;
                }
            },
            /**
             * 高亮显示与搜索条件相关的tr
             */
            hightlightSearchedTr:function (){
                var allTr = $("tr").filter(function (){
                    var kids = $(this).children();//最后一列
                    var flag = $.trim(kids.filter(":eq(7)").find("div").text()) == "Y";
                    return flag;
                });
                allTr.css({
                    "font-weight":700,
                    "color":"grey"
                });
            },
            /**
             * 前台处理数据
             */
            processData:function (data){
                var len = data.total;
                if(len>this.rows){
                    data.rows.splice(this.rows);
                }
            },
            //公共调用方法
            loader:function (param,parentId,flag,callback){
                var that = this;//防止this转换
                showMyLoading();
                var _url = (flag?this.defaultLoadUrl:this.paramLoadUrl)+"parentId="+parentId;
                $.ajax({
                    url:_url,
                    dataType:'json',
                    type:"post",
                    data:{
                        searchParam:JSON.stringify(param)
                    },
                    success:function (data){
                        if(data.total>0){
                            if(flag){
                                //初始化加载
                                that.searchType = "default";//无参数搜索
                                $.myCache.dataCache["noParamData"] = data;//缓存数据
                                that.defaultLoad(data);
                                that.loadAllCustName();//加载所有名称
                                that.prevLoad();//预先加载
                            }else{
                                $.myCache.dataCache["preLoadData"] = undefined;//清空初始化
                                $.myCache.dataCache["paramData"] = $.extend(true,{},data);//带参数数据缓存(深度copy)
                                $.myCache.dataCache["paramData"].rows.splice(0,that.rows);//删除初始进来的部分
                                that.searchType = "param";//带参数搜索
                                that.processData(data);//前台处理数据（模拟分页）（只渲染分页指定的条数）
                                //条件搜索
                                that.paramLoad(data);
                            }
                            if(data.total>that.rows){
                                intervalId = setInterval(function (){
                                    if(typeof $.myCache.dataCache["preLoadData"] != 'undefined'){
                                        clearInterval(intervalId);
                                        $("#loadMoreDiv").show()
                                    }else{
                                        $("#loadMoreDiv").hide()
                                    }
                                },500);
                            }

                        }else{
                            $('#content').treegrid('loadData',data);//渲染数据
                            $("#loadMoreDiv").hide()
                        }
                        closeLoading();
                        if(callback)
                            callback();
                    },
                    error:function (a,b,c){
                        alert("加载列表出错："+b);
                        closeLoading();
                    }
                });
            },
            /**
             * 预先加载一页
             */
            prevLoad:function (){
                var searchParam = JSON.stringify({page:(++this.page)+"",rows:this.rows});
                var _url = "/citics.crm/customerwidget/queryListLazy.do?parentId=0&searchParam="+searchParam;
                var that = this;
                $.getJSON(_url,function (data){
                    $.myCache.dataCache["preLoadData"] = data;//预先加载缓存数据
                    that.prevLoadPage = 1;//预先加载分页(重置)
                })
            },
            /**
             * 加载所有客户名称（缓存）
             */
            loadAllCustName:function (){
                $.getJSON("/citics.crm/customerwidget/queryAllCustName.do",function (data){
                    $.myCache.dataCache["allName"] = data;//缓存名称数据
                })
            }

    }

})(window,jQuery);

0 0