jQuery tableGrid插件(原创并附加代码)

    随着网络应用的不断发展，用户对富客户端的要求越来越完美，一个完美的界面操作往往可以将一个服务端数据展示的完美

 

    这几年来，jQuery一直是我热捧的javascript库，简单易懂，操作方便，无聊的时候就喜欢写一些控件，今天展示下

 tableGrid控件（非完整版）

 

 

    控件中有行编辑（面前有combox,timepick,checkbox,text4种编辑类型），列排序，自定义button，自定义xtype型编辑框，自定义列模式 （3种供选择），这些是我现在展示的代码中所拥有的功能（非完整版）。在完整版中还有行拖拽，列进度条显示，分页条进度条模式等等

 

    先来看看效果：

   

 

 

   为了对数组和对象操作更加方便，仿java编写了一个map方法，代码如下：

 

function Map() {
    this.isMap = true;
    var struct = function (key, value, other) {
        this.key = key;
        this.value = value;
        this.other = other;
    };
    var put = function (key, value, other) {
        for (var i = 0; i < this.arr.length; i++) {
            if (this.arr[i].key === key) {
                if (typeof other == Boolean || other === true) {
                    this.arr[i].value += "," + value;
                } else {
                    this.arr[i].value = value;
                    this.arr[i].reg = other;
                }
                return;
            }
        }
        this.arr[this.arr.length] = new struct(key, value, other);
    };


    var getOtherVal = function (key) {
        for (var i = 0; i < this.arr.length; i++)  if (this.arr[i].key === key) return this.arr[i].other;
        return null;
    };

    var getValue = function (key) {
        for (var i = 0; i < this.arr.length; i++)  if (this.arr[i].key === key) return this.arr[i].value;
        return null;
    };

    var remove = function (key) {
        var v;
        for (var i = 0; i < this.arr.length; i++) {
            v = this.arr.pop();
            if (v.key === key) continue;
            this.arr.unshift(v);
        }
    };
    var keySet = function () {
        var keyArr = [];
        for (var i = 0; i < this.arr.length; i++) {
            var _key = this.arr[i].key;
            keyArr[i] = _key;
        }
        return keyArr;
    };
    var valSet = function () {
        var valArr = [];
        for (var i = 0; i < this.arr.length; i++) {
            var _val = this.arr[i].value;
            valArr[i] = _val;
        }
        return valArr;
    };
    var alertKeyAndVal = function () {
        var store = "";
        for (var i = 0; i < this.arr.length; i++) {
            var _val = this.arr[i].key;
            var _key = this.arr[i].value;
            store += "key:" + _key + ",val:" + _val;
        }
        return store;
    };
    var size = function () {
        return this.arr.length;
    };
    var isEmpty = function () {
        return this.arr.length <= 0;
    };

    this.arr = new Array();
    this.getValue = getValue;
    this.getOtherVal = getOtherVal;
    this.put = put;
    this.remove = remove;
    this.size = size;
    this.isEmpty = isEmpty;
    this.keySet = keySet;
    this.valSet = valSet;
    this.alertKeyAndVal = alertKeyAndVal;
}

 

 

    再展示下jquery.tableGrid.js文件：

 

function Store(ps) {
    this.url = ps.url;
    this.JsonReader = ps.JsonReader;
    var getUrl = function() {
        return this.url;
    }
    var getReader = function() {
        return this.JsonReader;
    }
    this.getUrl = getUrl;
    this.getReader = getReader;
}
(function ($) {
    $.fn.grid = $.grid = function (opt) {
        var ps = $.extend({}, $.fn.grid.defaults, opt || {});
        $.fn.grid.defaults = {
            ele:'grid',
            width:'650px',
            selModel:'CheckModel',
            dblUpdate:false,
            async:true,
            subJoin:'',
            colModel:[],
            method:'post',
            dataType:'json',
            titleBar:'',
            rowHeight:27,
            onClickRowEvent:function() {
            },
            toolBar:[],
            PagingToolbar:{},
            UpdataModel:{},
            updataModel:"td",
            hasBotton:false
        };

        var grid = this;
        this.hideTd = new Map();
        this.columSelectMap = new Map();
        this.columCheckMap = new Map();
        this.columFunMap = new Map();
        this.columProgressMap = new Map();
        this.toolbarMap = new Map();
        this.totalMap = new Map();
        this.rowHeight = ps.rowHeight;
        this.disp = 0;
        this.data = [];
        this.widthArr = [];
        this.RowData = [];
        this.ajaxdata;
        this.saveUrl = ps.UpdataModel.SaveUrl;
        this.findSortKey;

        ps.width.substring(ps.width.length - 1) == "%" ? this.widthtype = true : this.widthtype = false;
        var removeArr = ['pFirst pFirstd','pPrev pPrevd','pNext pNextd','pLast pLastd','pFirstd','pPrevd','pNextd','pLastd','pFirst','pPrev','pNext','pLast'];
        var fun = {
            estimateBrowser: function() {
                var Sys = {};
                var ua = navigator.userAgent.toLowerCase();
                var s;
                (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] : (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] : (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] : (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] : (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
                return Sys;
            },
            createBody:function(grid) {
                grid.filterDiv = $('<div class="nBtn" style="left: 229px; top: 53px;"><div></div></div>').hide().appendTo(grid);
            },

            cssOperate:function(obj, css1, css2) {
                obj.addClass(css1).removeClass(css2);
            },

            sortFun:function(rows, newDirection, oTable, column, flag) {
                $.each(rows, function(index, row) {
                    if (flag)
                        row.sortKey = parseInt(grid.findSortKey($(row).find("td").eq(column)));
                    else
                        row.sortKey = grid.findSortKey($(row).find("td").eq(column));
                });
                rows.sort(function(a, b) {
                    if (a.sortKey < b.sortKey) {
                        return -newDirection;
                    } else if (a.sortKey > b.sortKey) {
                        return newDirection;
                    } else {
                        return 0;
                    }

                });
                $.each(rows, function(index, row) {
                    oTable.children("tbody").append(row);
                    row.sortKey = null;
                });
            },

            createTitle:function(grid) {
                if (ps.titleBar != '') {
                    grid.TitleHeight = 26;
                    var ftitle = document.createElement('div');
                    var ptogtitle = document.createElement('div');
                    $(fun.mDiv).addClass('mDiv').appendTo(grid);
                    $(ftitle).addClass('ftitle').html('<span>' + ps.titleBar + '</span>').appendTo(fun.mDiv);
                }
            },

            createHr:function(grid) {
                grid.total = false;
                grid.HrHeight = 26;
                var hTable = document.createElement('table');
                $(fun.hDiv).addClass('hDiv').appendTo(grid);
                var hrTitle = [];
                hrTitle.push(' <tbody> <tr style="height:', 21, '" class="dataTableHead">');

                if (ps.selModel == 'CheckModel' || ps.selModel == 'TdSelectionModel') {
                    if (grid.widthtype) hrTitle.push('<th class="checkbox sorted" width="33px" index="0">')
                    else hrTitle.push('<th class="grid-th checkbox sorted" width="33px" index="0">');
                    hrTitle.push('  <div align="center" style="overflow:hidden;"> <input type="checkbox" name="checkbox[]"/></div>');
                    hrTitle.push('</th>');
                } else if (ps.selModel == 'RowSelectionModel') {
                    if (grid.widthtype) hrTitle.push('<th index="0" class="rownumber sorted" width="33px"><div style="  overflow:hidden;"></div></th>');
                    else hrTitle.push('<th index="0" class="grid-th rownumber sorted" width="33px"><div style="  overflow:hidden;"></div></th>');
                }

                if (ps.subJoin == "RowIndexModel") {
                    if (grid.widthtype) hrTitle.push('<th index="0" class="grid-th rownumber sorted" width="33px" align="left">编号</th>');
                    else hrTitle.push('<th index="0" class="grid-th rownumber sorted" width="33px" align="left">编号</th>');
                }

                for (var i = 0; i < ps.colModel.length; i++) {
                    var _class = '' , _hide = '' , _sorts = '';
                    if (i == 0) _class = 'sorted';
                    var col = ps.colModel[i];

                    if (col.total) {
                        grid.total = true;
                        grid.totalMap.put(col.name, col.total);
                    }
                    if (col.hide) {
                        _hide = 'none';
                        grid.hideTd.put(col.name, col.name)
                    }
                    if (col.sort) {
                        _sorts = 'sort'
                    }

                    var width;

                    if (col.width.toString().substring(col.width.toString().length - 2) == "px") {
                        width = parseInt(col.width.toString().substring(0, col.width.toString().length - 2));
                    } else {
                        width = col.width;
                    }
                    grid.widthArr[i] = width;
                    hrTitle.push('<th index="', i + 1, '" sort="', _sorts, '" class="grid-th ', col.sort, '" width="', width, '" name="', col.name, '" class="', _class, '" style="display:', _hide, ';position:static ;">');
                    hrTitle.push('<div style="text-align: ' + col.align + ';  overflow:hidden;">' + col.display + '</div>');
                    hrTitle.push('</th>');
                }
                hrTitle.push('  </tr></tbody>');
                $(hTable).addClass('dataTable');
                $(hrTitle.join("")).appendTo(hTable);
                $(hTable).width("100%").attr('cellpadding', 0).attr('cellspacing', 0).appendTo(fun.hDiv);

                $("input[name='checkbox[]']", $(fun.hDiv)).click(function() {
                    $(this).attr("checked") == true ? grid.selectedRowByIndex() : grid.unselectedRowByIndex();
                });

                $("th:gt(0)", hTable).hover(function() {
//                    $(this).find("a").show();
                }, function() {
//                    $(this).find("a").hide();
                });

                $("th[sort='sort']", hTable).each(function() {
                    var th = $(this);
                    var column = th.attr("index");
                    if ($(this).hasClass("string")