zoukankan      html  css  js  c++  java
  • webix .datatable 表格分页

      grid表格返回参数大都是 以下这种格式(参数名可能不一样)

    {
    
    data:[{...},{...} ...],
    count:39
    
     }
    

     

    webix的参数格式为

    {
    data:[{...},{...},{...}, ...],
    pos:8,                //从第几行开始接下去,相当于【(page-1)*size】)
    total_count:35  //总共有多少条
    }
    

      

    webix 分页我目前测出来的情况是返回  total_count  的值是多少 ,初始化的时候回一次查完出来 ,于是我返回的时候只返回 Math.min(page*size +1,count)       +1的原因是为了显示下一页

    效果如下

     datatable的代码

    define(function() {
    
        return {
            rows: [{
                    view: "toolbar",
                    cols: [{
                        view: "button",
                        label: "刷新",
                        type: "iconButton",
                        icon: "search",
                         80,
                        on: {
                            onItemClick: function() {
    
                            }
                        }
                    }, {
                        view: "button",
                        id: "aa",
                        label: "新增",
                        type: "iconButton",
                        icon: "plus",
                         80,
                        on: {
                            onItemClick: function(a, b, c, d) {
                                console.log(a, b, c, d)
                                $$("a").add({
                                    $new: true
                                }, 0);
                            }
                        }
                    }, {
                        view: "button",
                        label: "删除",
                        type: "iconButton",
                        icon: "trash",
                         80,
                        on: {
                            onItemClick: function() {
    
                            }
                        }
                    }, {
                        view: "button",
                        label: "修改",
                        type: "iconButton",
                        icon: "wrench",
                         80,
                        on: {
                            onItemClick: function() {
    
                                /*    var datatable = this.getParentView().getParentView()
                                        .getMyDatatable();
                                    var rows = datatable.getMySelectItem();
                                    for(var i = 0; i < rows.length; i++) {
                                        if(rows[i].$new) {
                                            datatable.remove(rows[i].id)
                                        } else {
                                            datatable.hasCss(rows[i].id, "webix_remove_row") ? datatable
                                                .removeCss(rows[i].id, "webix_remove_row") :
                                                datatable.addRowCss(rows[i].id,
                                                    "webix_remove_row");
                                        }
    
                                    }*/
                            }
                        }
                    }]
                    // toolbarElements
    
                },
                {
                    view: "datatable",
                    id: "a",
                    editable: true,
                    select: "row",
                    navigation: true,
                    datafetch: 20,
                    rowHeight:33,
                    loadahead: 15,
                    tooltip: true,
                    dragColumn: true,
                    resizeColumn: true,
                    columns: [ //
                        { id: "index", template: "{common.index()}", header: [{ text: "", colspan: 3 }, "<span class='webix_icon fa-list-ol' style='height: 19px;'></span>"],  40 },
                        { id: "ch1", header: ["", { content: "masterCheckbox", contentId: "mc1" }], template: "{common.checkbox()}",  40 },
                        { id: "ra1", header: ["", ""], template: "{common.radio()}",  40 },
                        { id: "sourceId", header: "资源ID", hidden: true },
                        { id: "sourceCode", header: ["资源代码", { content: "selectFilter" }], editor: "text", sort: "server",  140 },
                        { id: "sourceName", header: ["资源名称", { content: "selectFilter" }], editor: "text",  140 },
                        { id: "pid", header: ["上级资源", { content: "selectFilter" }], editor: "text",  140 },
                        { id: "sourceIcon", header: ["资源图标", { content: "selectFilter" }], editor: "text",  160 },
                        { id: "sourceUrl", header: ["资源URL", { content: "selectFilter" }], editor: "text",  200 },
                        { id: "sourceIndex", header: ["资源排序", { content: "selectFilter" }], editor: "text",  140 },
                        { id: "remark", header: ["备注", { content: "selectFilter" }], editor: "text",  140 },
                        { id: "createTime", header: ["创建时间", { content: "selectFilter" }],  160 },
                        { id: "creater", header: ["创建人", { content: "selectFilter" }],  140 },
                        { id: "updateTime", header: ["更新时间", { content: "selectFilter" }],  160 },
                        { id: "updater", header: ["更新人", { content: "selectFilter" }],  140 },
                    ],
                    on: {
                        "data->onStoreUpdated": function() {
                            this.data.each(function(obj, i) {
                                //obj.index = i + 1;
                            })
                        },
                        "onBeforeAjax": function(a, b, c, d, e) {
                            console.log(111)
                            return true;
                        }
                    },
                    url: "ljx->http://localhost:8080/grid/webix/list",
                    params: { size: 20 },
                    pager: "pagerId"
                },
                {
                    view: 'pager',
                    id: "pagerId",
                    limit: 1,
                    page: 1,
                    height: 40,
                    group: 4, //数据按钮的个数默认最多5个
                    size: 20,
                    template: '{common.first()} {common.prev()} {common.pages()} {common.next()} {common.last()} {common.count()} ',
    
                }
            ]
    
        }
    
    });

    扩展webix的扩展代码

    //-----------------------------------------------------------------------------------扩展DataTable--------------------------------------------------------
    
    //动态代理
    webix.proxy.ljx = {
    	$proxy: true,
    	load: function(view, callback, params) {
    
    		webix.extend(params || {}, this.params || {}, true);
    
    		//把datatble 下的params 参数 传进来
    		var view_params = view.config.params || {};
    
    		if(typeof view_params == "function") {
    			view_params = view_params(view);
    		}
    
    		webix.extend(params || {}, view_params || {}, true);
    
    		webix.ajax().bind(view).post(this.source, params, callback);
    	}
    };
    
    //排序
    webix.ui.datatable.prototype.constructor.$protoWait[0].type.index = function() {
    	return "<span>" + (arguments[4] + 1) + "</span>";
    };
    
    //排序图标
    webix.ui.datatable.prototype.constructor.$protoWait[0].type.indexIcon = function() {
    	return "<span class='webix_icon fa-list-ol' style='height: 19px;'></span>";
    };
    
    //-----------------------------------------------------------------------------------扩展pager--------------------------------------------------------
    
    //扩展pager 右侧显示
    webix.ui.pager.prototype.constructor.$protoWait[0].type.count = function(obj) {
    	return webix.template("<b style='float:right;line-height: 40px;font-size: 16px;padding-right: 20px;'>第{obj.page} 页 / 共 {obj.limit} 页</b>")({ page: obj.page + 1, limit: obj.limit });
    }
    

      我用的是requrejs管理模块

  • 相关阅读:
    tkinter 类继承的三种方式
    tkinter 的两个例子
    python 测试驱动开发的简单例子
    python 播放 wav 文件
    Python 操作 MongoDB
    【转】如何拿到半数面试公司Offer——我的Python求职之路
    scrapy 保存到 sqlite3
    scrapy 爬取 useragent
    收集的User-Agent
    scrapy 登录
  • 原文地址:https://www.cnblogs.com/lijinxin/p/webix.html
Copyright © 2011-2022 走看看