1. 程式人生 > >前端表格的常用場景程式碼

前端表格的常用場景程式碼

ulynlist幾種場景程式碼
tableColumn->rownumbers(true,false)顯示序號
isFullRow(true)是否填充滿行數

前端分頁

function creditTable(url){
        this.data = new Array();
        this.url = url;
        var $this = this;
        this.init = function(){
            $this.showData();//先展示出標題
            if(url!=null){
                //獲取列表
userAjax = $.sscajax({ type: "POST", url: this.url, dataType: "json", success: function(data){ $this.data = data; $this.showData(); }, error:function
(result){
} }); } }; //顯示資料 this.showData=function(){ var opts = { basePath:basePath+"js/sslib/ulynlist", tableTpl:"credit2", tableColumn:{ title:'ulynlist'
, keyColumn:"", columns:[ {field:'title',overflowview:'ellipsis',label:'信用公告標題',className:"unSortable",width:"200px"}, {field:'publish_user',overflowview:'normal',label:'釋出使用者',className:"unSortable"}, {field:'create_time',overflowview:'normal',label:'釋出時間',className:"unSortable"}, {field:'',overflowview:'normal',label:'操作',className:'unSortable Operation',width:140, bodyContent:'<a id="[id]" class="table_do_a btn_edit" href="javascript:void(0)">編輯</a>'+'&nbsp&nbsp'+ '<a id="[id]" class="table_do_a btn_delete roleDelete" href="javascript:void(0)">刪除</a>'+'&nbsp&nbsp'+ '<a id="[id]" class="table_do_a btn_detail roleDelete" href="javascript:void(0)">詳情</a>' } ], rownumbers:false }, afterTableRender:function(){ }, customData:$this.data, extra:{linesPerPageEditable:true}, requestData:{linesPerPage:10}, pageBarId: 'creditInfoManagerBar', pageBarTpl:"credit2" }; $("#creditInfoManager").ulynlist(opts); }; }

後端分頁

主要是將customData設定成null,設定url

function Table(url){
        this.data = new Array(5);
        this.url = url;
        this.opts = null;
        var $this = this;
        this.init = function(){
            $this.showData();//先展示出標題
            $.showLoading();
        }
        //顯示資料
        this.showData=function(){
            $this.opts = {
                    basePath:basePath+"js/sslib/ulynlist",
                    tableTpl:"credit2",
                    tableColumn:{
                        title:'ulynlist',
                        keyColumn:"",
                        columns:[
                            {field:'user_name',overflowview:'normal',label:'登入使用者',className:"unSortable",width:"200px"},
                            {field:'dept_name',overflowview:'normal',label:'登入單位',className:"unSortable"},
                            {field:'login_time',overflowview:'normal',label:'登入時間',className:"unSortable"},
                            {field:'state',overflowview:'normal',label:'登入狀態',className:"unSortable",
                                tableTransFunc:function(value,item){
                                    if(value=="1"){
                                    return "成功";
                                    }else if(value=="0"){
                                    return "失敗";
                                    };
                            }},
                            {field:'ip',overflowview:'normal',label:'登入ip',className:"unSortable"},
                            {field:'memo',overflowview:'ellipsis',label:'登入描述',className:"unSortable"},
                        ],
                        rownumbers:true
                    },
                    afterTableRender:function(){

                    },
                    customData:null,
                    url:url,
                    extra:{linesPerPageEditable:true},
                    requestData:{linesPerPage:10},
                    pageBarId: 'creditInfoManagerBar',
                    pageBarTpl:"credit2",
                    isFullRow:true
                };
                $("#creditInfoManager").ulynlist($this.opts);
        }
    }

java端對應的接收引數

  String linesPerPage = request.getParameter("linesPerPage");
            String currentPage = request.getParameter("currentPage");
            String userId = getUserId(request);
            JSONObject result = loginAuditService.getLoginLogList(userId,begin_time,end_time,state,Integer.parseInt(currentPage),Integer.parseInt(linesPerPage));
            JSONObject rtnJsonObject = new JSONObject();
            rtnJsonObject.put("status",true);
            rtnJsonObject.put("msg","獲取資料成功");
            JSONObject businessJsonObject = new JSONObject();
            businessJsonObject.put("list",result.getJSONArray("data"));
            businessJsonObject.put("currentPage",result.getString("current_page"));
            businessJsonObject.put("totalNum",result.getString("total_num"));
            businessJsonObject.put("linesPerPage",result.getString("row_num"));
            rtnJsonObject.put("data",businessJsonObject);

            response.setContentType("application/json");
            printOut(response, rtnJsonObject);

自定義模版表格的分頁

主要用到的外掛:ulynlistPagination

/**
     * 獲取相關的動態表格
     */
    function Dynamic(data,tableBarTpl,divId){
        this.data = data;
        this.filter_data = data;
        this.tableTpl = "newTpl";
        this.tableBarTpl = tableBarTpl;
        this.divId = divId;
        this.currentPage = 1;
        this.linesPerPage = 5;
        var $this = this;
        var opts = {
            pageBarPath:basePath + 'js/sslib/ulynlist/pagebar',//pagebar的根資料夾路徑
            pageBarTpl: 'flat', //模版檔名
            currentPage:$this.currentPage, //當前頁碼
            linesPerPage:$this.linesPerPage,  //每頁幾行
            totalNum:$this.filter_data.length,   //總記錄數
            pageSpanNum:5,  //輸出span的個數
            afterPaginationRender: function (ulynlistPageBarObj,opts) {
                showTable($this.currentPage,$this.linesPerPage);
            }, //分頁條渲染載入完回撥方法
            onPageClick:function(page){
                opts.currentPage = page;
                $this.currentPage = page;
                $($this.tableBarTpl).ulynlistPagination(opts);
            }
        }
        var showTable = function(currentPage,lingPerPage){
            var rest = parseInt(currentPage) * parseInt(lingPerPage) - $this.data.length;
            var restArray =null;
            if(rest > 0 ){
                restArray = new Array(rest);
            }
            var html = template($this.tableTpl, {"list":$this.filter_data.slice((currentPage-1)*lingPerPage,currentPage*lingPerPage),"restArray":restArray});
            $($this.divId).html(html);
        }
        var init = function(data){
            $this.currentPage = 1;
            $this.linesPerPage = 5;
            $this.filter_data = data;
            opts.currentPage = $this.currentPage;
            opts.linesPerPage = $this.linesPerPage;
            opts.totalNum = data.length;
            $this.totalPage = data.length/$this.linesPerPage;
            $($this.tableBarTpl).ulynlistPagination(opts);
        }
        function registObjectEven(){

        }
        this.filter = function(title){
            var include_key_list = [];
            var array = $this.data;
            if(!$.trim(title)){
                include_key_list = array;
            }else{
                $.each(array,function(i,value){
                    if(value.title.indexOf(title) == -1){
                    }else{
                        include_key_list.push(value);
                    }
                });
            }
            init(include_key_list);
            showTable($this.currentPage,$this.linesPerPage);
        }
        showTable($this.currentPage,$this.linesPerPage);
        $($this.tableBarTpl).ulynlistPagination(opts);
        registObjectEven();
    }

表格中有額外的內容(詳情)需要非同步載入

  1. 獲取物件列表
    function getApplicationObject(schemeId,currentPage,start_date,end_date,dept,object_name){
        if(!currentPage)currentPage = 1;
        $.sslajax({
            url:basePath+"alliance/get_scheme_object.do",
            data:{"scheme_id":schemeId,"current_page":currentPage,"row_num":5,"start_date":start_date,"end_date":end_date,"dept":dept,"object_name":object_name},
            success:function(data){
                showApplicationObject(data,schemeId);
            }
        });
    }

2.載入額外的詳情

function showApplicationObject(data,schemeId){
        $("#companyListPageBar").uPageBar({
            tableId:'#uTable',
            tableTpl:'#uTableTpl',
            currentPage:data.current_page,
            linesPerPage:5,
            totalNum:data.total_num,
            currentData:data.data,
            ajax:function(dataItem){
                var id = dataItem.record_id;
                var objectId = dataItem.object_id;
                var businessId = dataItem.business_id;
                var data_set = dataItem.data_set;
                return $.sslajax({
                    vid:"[object_id='"+objectId+"']",
                    url:basePath + "hall/credit_detail_info_records.do",
                    data:{"business_id":businessId,"id":id,"theme_id":schemeId,data_set:data_set,"objectId":objectId},
                    success:function(data){
                        $("[record_id='"+id+"']").html(data.detail);
                    }
                });
            },
            onPageClick:function(page){
                var json = {"dept":"","start_date":"","end_date":"","object_name":""};
                var $dept =  $("span.provide span[dept_name]");
                if("0"!=$dept.length){
                    json.dept = $dept.attr("dept_name");
                }
                json.start_date=$("#start_date").val();
                json.end_date=$("#end_date").val();
                json.object_name=$("#searchInp").val();
                getApplicationObject(schemeId,page,json.start_date,json.end_date,json.dept,json.object_name);
            },
            afterTableRender:function(opts,nowPageData){
                setOpenShow();
            },
        });
        function setOpenShow(){
            $(".publicityCon .btnToggleShow").click(function(){
                $(this).find("i").toggleClass("glyphicon-menu-up glyphicon-menu-down");
                $(this).closest("li").toggleClass("showDD");
                if($(this).find("span").text()=="收起"){
                    $(this).find("span").text("展開");
                }else{
                    $(this).find("span").text("收起");
                }
            });
            $("dt[_object_id]").click(function(){
                var objectId = $(this).attr("_object_id");
                //var data_set = $(this).attr("data_set");
                var url = basePath + "creditPage/credit_query.do";
                if(objectId != undefined && objectId !=null && objectId.length<15){
                    Request.openURL(url,{"object_id":objectId});
                }else{
                    $(this).showTip("無關聯資料");
                    return;
                }
            });
        }
    }

3.表格模版

<script  id="uTableTpl" type="text/html">
  {{each list as item index}}
  <li>
    <button type="button" class="btn btnToggleShow">
      <i class="glyphicon glyphicon-menu-down"></i>
      <span>展開</span>
    </button>
    <dl>
      <dt _object_id="{{item.object_id}}">{{item.object_name}}</dt>
      <dd record_id="{{item.record_id}}">
      </dd>
    </dl>
  </li>
  {{/each}}
</script>