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 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, '" width="33px" index="0">') else hrTitle.push('<th 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" width="33px"><div style=" overflow:hidden;"></div></th>'); else hrTitle.push('<th index="0" width="33px"><div style=" overflow:hidden;"></div></th>'); } if (ps.subJoin == "RowIndexModel") { if (grid.widthtype) hrTitle.push('<th index="0" width="33px" align="left">编号</th>'); else hrTitle.push('<th index="0" 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, '" width="', width, '" name="', col.name, '" 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")) { grid.findSortKey = function($cell) { return $cell.find("div").html(); } } else if ($(this).hasClass("num")) { grid.findSortKey = function($cell) { var key = parseInt($cell.find("div").html()); return isNaN(key) ? 0 : parseInt(key); } } else if ($(this).hasClass("data")) { grid.findSortKey = function($cell) { return Date.parse('1 ' + $cell.find("div").html()); } } th.click(function() { if (grid.findSortKey) { var oTable = $('table', fun.bDiv); var aTRs = new Array; var newDirection = 1; var rows = oTable.find("tbody > tr").get(); if ($(this).hasClass(".sorted-asc") || (!$(this).hasClass(".sorted-asc") && !$(this).hasClass(".sorted-desc"))) { if ($(this).hasClass(".sorted-asc")) { newDirection = -1; fun.sortFun(rows, newDirection, oTable, column, $(this).hasClass("num")); $(this).removeClass("sorted-asc").addClass("sorted-desc"); fun.cssOperate($(this), "sorted-desc", "sorted-asc"); fun.cssOperate($(this).find("div"), "up", "dn"); } else if (!$(this).hasClass(".sorted-asc") && !$(this).hasClass(".sorted-desc")) { newDirection = 1; fun.sortFun(rows, newDirection, oTable, column, $(this).hasClass("num")); $(this).addClass("sorted-asc"); fun.cssOperate($(this).find("div"), "dn", "up"); } } else if ($(this).hasClass(".sorted-desc")) { $.each(grid.rawtype, function(index, row) { oTable.children("tbody").append(row); row.sortKey = null; }); $(this).removeClass("sorted-desc").find("div").removeClass("dn up"); } } oTable.find("tbody > tr").removeClass('erow').each(function(index, n) { if (index % 2 && ps.stripe) $(this).addClass('erow'); }); $(this).siblings().find("div").removeClass("dn up"); }).hover(function() { $(this).addClass("hover"); }, function() { $(this).removeClass("hover"); }); }) }, createGbody:function(grid) { grid.bTable = document.createElement('table'); grid.bTable.className = 'dataTable'; grid.tbody = document.createElement('tbody');// $(fun.bDiv).height(ps.PagingToolbar.pageSize * 27 - 1).addClass('bDiv').appendTo(grid); $(fun.bDiv).height(ps.PagingToolbar.pageSize * 27 - 1).addClass('bDiv').appendTo(grid); grid.pageSize = ps.PagingToolbar.pageSize; var Store = ps.PagingToolbar.store; grid.url = Store.getUrl(); grid.page = 1; grid.ajaxdata = Store.data; for (var i = 0; i < ps.PagingToolbar.pageSize; i++) { var tr = document.createElement('tr'); var $tr = $(tr).appendTo(grid.tbody); var td = document.createElement('td'); if (ps.selModel == 'CheckModel' || ps.selModel == 'TdSelectionModel') { $(td).css({'padding-top':'2px'}).appendTo(tr); $('<div style="text-align: center; overflow:hidden;"><input type="checkbox" name="' + i + '"/></div>').click(function() { if (ps.selModel == 'TdSelectionModel') { } else $(this).attr("checked") == true ? $(this).parent().parent().addClass('trSelected') : $(this).parent().parent().removeClass('trSelected'); }).appendTo(td); if (ps.subJoin == "RowIndexModel") $(td).appendTo(tr); } else if (ps.selModel == 'RowSelectionModel') { $(td).css({'padding-top':'2px'}).appendTo(tr); } $(td).width('33px').attr('align', 'center'); for (var j = 0; j < ps.colModel.length; j++) { var col = ps.colModel[j]; var widthStr = ""; var td = $('<td width=' + grid.widthArr[j] + ' align=' + col.align + '><div style="text-align: ' + col.align + '; overflow:hidden;"></div></td>') if (col.checkModel) { grid.columCheckMap.put(col.name, j) } else if (typeof col.selectModel != 'undefined') { grid.columSelectMap.put(col.name, j); $(td).attr({'selecter':true,'key':col.key}); } else if (jQuery.isFunction(col.renderer)) { grid.columFunMap.put(col.name, j) } else if (col.progressBarModel) { grid.columProgressMap.put(col.name, j); } if (col.total == 'int' || col.total == 'float') { $(td).attr('total', col.total); } $(td).click(function() { var $tr = $(this).parent(); if (ps.selModel == 'TdSelectionModel') { $tr.siblings().find('td:eq(0)').find('input').attr('checked', false); grid.getAllTdObj().not($(this).addClass('tdSelected')).removeClass('tdSelected') } else { var $sibings = $tr.addClass('trSelected').siblings().removeClass('trSelected').find('td:eq(0)').find('input').attr('checked', false); } $('td:eq(0)', $tr).find('input').attr('checked', true); }).attr({ 'name':col.name, 'editor':col.editor, 'editoring':'false', 'align':col.align }).appendTo(tr); if (grid.hideTd.getValue(col.name) != null) $(td).hide(); //.css('width',col.width) } grid.RowData[i] = $tr; $tr.hide(); } $("tr", $(grid.tbody)).click(function() { var index = $(this).attr("index"); ps.onClickRowEvent(grid.data[index]); }); fun.bind(grid.url, grid.ajaxdata, 1, true, grid); $(grid.tbody).appendTo(grid.bTable); $(grid.bTable).width("100%").attr('cellpadding', 0).attr('cellspacing', 0).appendTo(fun.bDiv); grid.getEditorsTd().attr("editored", "true"); }, createTotal:function(grid) { fun.tDiv.className = 'toDiv'; var table = document.createElement('table'); var total = []; total.push(' <tr style="height:26px;">'); if (grid.widthtype) total.push('<th width="3%"> </th>'); else total.push('<th width="25"> </th>'); for (var i = 0; i < ps.colModel.length; i++) { var _class = '', _hide = ''; if (i == 0) _class = 'sorted'; var col = ps.colModel[i]; if (col.hide) { _hide = 'none' } if (col.total) { total.push('<th total="total" width="' + col.width + '" name="' + col.name + '" align="' + col.align + '" style="display:' + _hide + ';">0</th>'); } else { total.push('<th width="' + col.width + '" name="' + col.name + '" align="' + col.align + '" style="display:' + _hide + ';"></th>'); } } total.push(' </tr>'); $(total.join("")).appendTo(table); $(table).width("100%").appendTo(fun.tDiv); $(fun.tDiv).appendTo(grid) }, createBotton:function(grid) { var span = document.createElement('span'); $(span).appendTo(fun.vGrip); $(fun.vGrip).addClass('vGrip').appendTo(grid); }, dragStart:function(dragtype, e, obj) { if (dragtype == 'vresize') return { sy: e.pageY, sx: e.pageX }; }, createPager:function(grid) { fun.pDiv.className = 'pDiv'; fun.pDiv.innerHTML = '<div style="width:"'+(parseInt(grid.width())-2)+'"px;margin-right:2px"></div>'; var html = '<div style="margin-top:2px;" type="text" size="2" value="1" /> 页,共 <span style="float:right;"><span tip="' + button.tooltip + '">'); buttonarr.push(' <div>'); buttonarr.push(' <span><input type="image" src="' + button.iconCls + '" style="width:17px;height:17px;"/></span><span style="padding-left:1px;padding-top:5px">' + button.text + '</span>'); buttonarr.push(' </div>'); buttonarr.push('</div>'); var $but = $(buttonarr.join("")).appendTo(tDiv2); $but.hover(function() { $(this).addClass("fbOver"); }, function() { $(this).removeClass("fbOver"); }); fun.buttonEvent(i, $but); grid.toolbarMap.put(button.id, i); } else if (button.xtype == 'text') { $('<div id="' + button.id + '"/></div>').appendTo(tDiv2); } else if (button.xtype == "combox") { var div = $('<div : ischeck = ""; $("<input type='checkbox' " + ischeck + " name='checkbox_disabled'/>").attr("disabled", "true").appendTo($(this).find("div").html("")); map.put(name, isArray ? centext.getValue(name) : centext[name]); } else if (grid.columProgressMap.getValue(name) != null) { var width = $(this).find("div").width() * (parseInt(centext[name]) / 100); var tdiv = $('<div style="height: 16px; width: ' + (width - 3) + 'px;"><font color="#FFFFF" style=""></font></div></div>').appendTo($(this).find("div:eq(0)").html("")); map.put(name, isArray ? centext.getValue(name) : centext[name]); } else { var dataType = ps.colModel[i].DType; if (dataType == "date") { var year,month,day,date,hours,minutes,seconds; var time; if (centext[name] != "" && centext[name] != null) { $.each(centext[name], function(i, c) { switch (i) { case "date":date = c;break; case "day":day = c;break; case "hours":hours = c;break; case "minutes":minutes = c;break; case "month":month = c;break; case "seconds":seconds = c;break; case "year":year = c;break; } }); time = parseInt(1900 + year) + "-" + parseInt(month + 1) + "-" + parseInt(day + 1) + " " + hours + ":" + minutes + ":" + seconds; } else { time = "——"; } $(this).find("div").text(time); map.put(name, time); } else { $(this).find("div").text(isArray ? centext.getValue(name) : centext[name]); map.put(name, isArray ? centext.getValue(name) : centext[name]); } } var tot = grid.totalMap.getValue(name); if (tot != null) { var val = isArray ? centext.getValue(name) : centext[name]; var value = $('th[name="' + name + '"]', $(fun.tDiv)).text(); var total = 0; if (tot == 'int') { total = parseInt(value) + parseInt(val); } else if (tot == 'float') { total = parseFloat(value) + parseFloat(val); } $('th[name="' + name + '"]', $(fun.tDiv)).text(total); } }); grid.data[index] = map; display++; return display; }, addData:function(data, firstinit, internal) { var tr = $('tbody tr', fun.bDiv); if (!internal) { var temp = 1; $('th[total="total"]', $(fun.tDiv)).text(0); $.each(data, function() { grid.msgCount = data.totalProperty; grid.pageCount = Math.ceil((grid.msgCount / grid.pageSize)); if (firstinit) { grid.page = 1; grid.pageCount == 0 || grid.pageCount == 1 ? fun.changeCls(removeArr, [removeArr[4],removeArr[5],removeArr[6],removeArr[7]]) : fun.changeCls(removeArr, [removeArr[4],removeArr[5],removeArr[10],removeArr[11]]); } $('.count', fun.pDiv).html(grid.pageCount); $('.input', fun.pDiv).val(grid.page); if (temp == 2) { var display = 0; $.each(data.root, function(index, centext) { display = fun.input(tr, index, centext, display, false); }); grid.display = display; display == 0 ? $('.pPageStat', $(fun.pDiv)).html(ps.PagingToolbar.emptyMsg) : $('.pPageStat', $(fun.pDiv)).html(''); for (var dis = parseInt(display); dis < grid.pageSize; dis++) tr.eq(dis).hide(); grid.data = grid.data.slice(0, display); } temp++; }) } else { var display = 0; $.each(data, function(index, n) { display = disp = fun.input(tr, index, n, display, true); }); for (var dis = parseInt(display); dis < grid.pageSize; dis++) tr.eq(dis).hide(); } $("input[name='checkbox[]']", $(fun.hDiv)).attr("checked", false); if (grid.page == grid.pageCount) { fun.changeCls(removeArr, [removeArr[8],removeArr[9],removeArr[6],removeArr[7]]) } else if (grid.page < grid.pageCount && grid.page != 1) { fun.changeCls(removeArr, [removeArr[8],removeArr[9],removeArr[10],removeArr[11]]) } }, changePage:function(ctype) { if (ctype == "first") { grid.page = 1; fun.changeCls(removeArr, [removeArr[4],removeArr[5],removeArr[8],removeArr[9]]); } else if (ctype == "prev") { if (grid.page > 1) { grid.page == 2 ? fun.changeCls(removeArr, [removeArr[4],removeArr[5],removeArr[8],removeArr[9]]) : fun.changeCls(removeArr, [removeArr[8],removeArr[9],removeArr[10],removeArr[11]]); grid.page = grid.page - 1; } else { fun.changeCls(removeArr, [removeArr[4],removeArr[5],removeArr[10],removeArr[1]]); } } else if (ctype == "next") { if (grid.page < grid.pageCount) { (grid.page == grid.pageCount - 1) ? fun.changeCls(removeArr, [removeArr[8],removeArr[9],removeArr[6],removeArr[7]]) : fun.changeCls(removeArr, [removeArr[8],removeArr[9],removeArr[10],removeArr[11]]); grid.page = grid.page + 1; } } else if (ctype == "last") { grid.page = grid.pageCount; fun.changeCls(removeArr, [removeArr[8],removeArr[9],removeArr[6],removeArr[7]]); } $('.input', fun.pDiv).val(grid.page); fun.bind(grid.url, grid.ajaxdata, grid.page, false, grid); }, changeCls:function(remover, add) { $('div[name="' + removeArr[8] + '"]', fun.pDiv).removeClass(remover[0]).addClass(add[0]); $('div[name="' + removeArr[9] + '"]', fun.pDiv).removeClass(remover[1]).addClass(add[1]); $('div[name="' + removeArr[10] + '"]', fun.pDiv).removeClass(remover[2]).addClass(add[2]); $('div[name="' + removeArr[11] + '"]', fun.pDiv).removeClass(remover[3]).addClass(add[3]); }, createLoader:function(grid) { var bDivheight = $(fun.bDiv).height(); var div = document.createElement('div'); div.innerHTML = 'loading...'; fun.mkDiv.className = 'loadmask'; fun.lDiv.className = 'loadmask-msg'; $(div).appendTo(fun.lDiv); $(fun.lDiv).appendTo("body"); }, TrsDblclick:function(grid) { if (ps.updataModel == "tr") { var AllTrs = grid.getAllTrObj().dblclick(function() { var editorTrs = $(this).attr("iseditor", "true").find('td:gt(0)').each(function(i, n) { fun.TdDblclick($(this)); }) }) } else { grid.getAllTdObj().dblclick(function() { var td = $(this); td.parent().attr('iseditor', 'true'); if (td.attr("editor") == 'true') { fun.TdDblclick(td); td.parent().attr("iseditor", 'true'); } }) } }, TdDblclick:function(ele) { if (ele.attr("editored") == 'true') { var index = ele.parent().attr('index'); var text = ele.text(); var name = ele.attr('name'); var val = grid.data[index].getValue(name); if (ele.attr('selecter')) { var input = $("<input class=\"x-form-text x-form-field\"/>").attr("value", val); if (fun.estimateBrowser().ie == '8.0') input.css({ "width":parseInt(ele.width() - 30) + "px", "height":15 }); else if (typeof fun.estimateBrowser().ie != 'undefined' && fun.estimateBrowser().ie != '8.0') input.css({ "width":parseInt(ele.width() - 30) + "px", "height":17 }); else input.css({ "width":parseInt(ele.width() - 30) + "px", "height":15 }); ele.attr("editored", "false").find("div").html("").append(input); $(input).Jcombox(ps.colModel[grid.columSelectMap.getValue(name)].selectModel); } else { if (grid.columCheckMap.getValue(name) != null) { ele.attr("editored", "false").find("input").attr("disabled", false); } else { var input = $("<input />").css({ "width":ele.width() - 30, "height":18 }).attr("value", val); ele.attr("editored", "false").find("div").html("").append(input); } } } }, bind:function(url, data, pageIndex, firstinit, grid) { var _url = ""; var _data; url.substring(url.length - 1) == "&" ? _url = url + 'pageIndex=' + pageIndex + '&pageSize=' + grid.pageSize : _url = url + '?pageIndex=' + pageIndex + '&pageSize=' + grid.pageSize; data == "" ? _data = "" : _data = data; $.ajax({ type: ps.method, url: _url, data:_data, dataType: ps.dataType, timeout:30000, error:function(err) { alert(err) }, beforeSend: function() { $(fun.lDiv).css({ top: $(fun.hDiv).offset().top + (parseInt(ps.PagingToolbar.pageSize * 30) - 30) / 2, left:grid.offset().left + (grid.width() - 110) / 2 }).show(); }, complete: function() { $(fun.lDiv).hide(); if (grid.pageCount == 0 || grid.pageCount == 1) { fun.changeCls(removeArr, [removeArr[4],removeArr[5],removeArr[6],removeArr[7]]); } else { if (grid.page == 1) { fun.changeCls(removeArr, [removeArr[4],removeArr[5],removeArr[10],removeArr[11]]); } else if (grid.page > 1 && grid.page < grid.pageCount) { fun.changeCls(removeArr, [removeArr[8],removeArr[9],removeArr[10],removeArr[11]]); } else if (grid.page == grid.pageCount) { fun.changeCls(removeArr, [removeArr[8],removeArr[9],removeArr[6],removeArr[7]]); } } grid.rawtype = $('table', fun.bDiv).find("tbody > tr"); $(".countS", fun.pDiv).html(grid.msgCount); }, success: function(data) { grid.disp = fun.addData(data, firstinit); }, error: function(data) { fun.bDiv.find("table").find("tr").hide(); } }); }, hideTd:function(name) { $('td[name="' + name + '"]', $(fun.bDiv)).hide(); $('th[name="' + name + '"]', $(fun.hDiv)).hide(); $('div[name="' + name + '"]', $(fun.pDrag)).hide(); }, displayTd:function(name) { $('td[name="' + name + '"]', $(fun.bDiv)).show(); $('th[name="' + name + '"]', $(fun.hDiv)).show(); $('div[name="' + name + '"]', $(fun.pDrag)).show(); } }; this.selectedRowByIndex = function(index) { if (typeof index == "undefined") { $("tr", $(fun.bDiv)).addClass('trSelected').find("td:eq(0)").find('input').attr('checked', true); } else { $("tr[index='" + index + "']", $(fun.bDiv)).addClass('trSelected').find("td:eq(0)").find('input').attr('checked', true); } }; this.unselectedRowByIndex = function(index) { if (typeof index == "undefined") { $("tr", $(fun.bDiv)).removeClass('trSelected').find("td:eq(0)").find('input').attr('checked', false); } else { $("tr[index='" + index + "']", $(fun.bDiv)).removeClass('trSelected').find("td:eq(0)").find('input').attr('checked', false); } }; this.selectAll = function() { this.selectedRowByIndex(); }; this.evaluate = function(row, colum, valOfInput, Tdele) { var grid = this; var val; if (grid.columFunMap.getValue(colum) != null) { $("div", Tdele).html(ps.colModel[grid.columFunMap.getValue(colum)].renderer(valOfInput, row)); val = valOfInput; } else if (grid.columCheckMap.getValue(colum) != null) { $("div", Tdele).find("input").attr("disabled", true); var ch = ps.colModel[grid.columCheckMap.getValue(colum)]; Tdele.find("input").attr("checked") == true ? val = ch.checkModel.yes : val = ch.checkModel.no; } else if(grid.columSelectMap.getValue(colum) != null){ val = $(Tdele.find("input")).attr("key"); $("div", Tdele).html(valOfInput); } else { $("div", Tdele).html(valOfInput); val = valOfInput; } if (Tdele.attr('total') == 'int' || Tdele.attr('total') == 'float') { var data_val = grid.data[row].getValue(colum); var total_val = $('th[name="' + colum + '"]', $(fun.tDiv)).text(); if (Tdele.attr('total') == 'int') { $('th[name="' + colum + '"]', $(fun.tDiv)).text(parseInt(total_val) - parseInt(data_val) + parseInt(val)); } else { $('th[name="' + colum + '"]', $(fun.tDiv)).text(parseFloat(total_val) - parseFloat(data_val) + parseFloat(val)); } } fun.setData(row, colum, val, grid); Tdele.attr("editored", "true"); var sjon = ""; typeof Tdele.attr("key") != "undefined" ? sjon = "\"" + Tdele.attr("key") + "\":\"" + val + "\"" : sjon = "\"" + Tdele.attr("name") + "\":\"" + val + "\""; return sjon; }; this.saveEvent = function () { var returnStr; var grid = this; var saveby = ps.UpdataModel.saveby; var data = "[{"; var trs = $(fun.bDiv).find("tr[iseditor='true']").each(function (_index, n) { var arr = []; var tr = $(this).attr("iseditor", "false"); var index = grid.getRowNo(tr); for (var i = 0; i < saveby.length; i++) { var val = grid.getRow(index).getValue(saveby[i]); data = data + "\"" + saveby[i] + "\":\"" + val + "\","; } var map = new Map(); var temp = 0; var tr_childrens = $(this).find("td[editor='true']").each(function (i) { var thisTd = $(this); var type = thisTd.attr("reg"); if (thisTd.attr("editored") == "false") { var colum = thisTd.attr("name"); var input_val = thisTd.find("div").find("input").val(); arr[temp] = grid.evaluate(index, colum, input_val, thisTd); temp ++; } thisTd.attr("editored", "true"); }); arr.length != 0 ? (data = data + arr + "},{") : ""; var index = $(this).find("td:eq(0)").find("div").html(); grid.data[index - 1] = map; }); var source = data.substring(0, data.length - 2) + "]"; if (source == "]") { $.JMessage("message4-" + ps.ele, "温馨提示：", "请您确定是否有信息需要保存", "question"); } else { $.ajax({ type: "post", url: grid.saveUrl, data:'saveSource=' + source, timeout:30000, async:false, success: function(data) { returnStr = data; } }); } return returnStr; }; this.setSaveUrl = function(saveurl) { this.saveUrl = saveurl; }; this.deleteEvent = function () { var grid = this; var returnStr; var deleteby = ps.UpdataModel.deleteby; if (!grid.hasSelected()) { $.JMessage("message1-" + ps.ele, "温馨提示：", "你没有选择行", "question"); } else { var source = "{"; var arr = grid.getSelectedRowIndexs(); for (var i = 0; i < arr.length; i++) { for (var a = 0; a < deleteby.length; a++) { a == deleteby.length - 1 ? source = source + "\"" + deleteby[a] + "\":\"" + grid.data[arr[i]].getValue(deleteby[a]) + "\"" : source = source + "\"" + deleteby[a] + "\":\"" + grid.data[arr[i]].getValue(deleteby[a]) + "\","; } i == arr.length - 1 ? source = source + "}" : source = source + "},{"; } var deleteUrl = ""; var data = "deleteSource=[" + source + "]"; $.JMessage("message2-" + ps.ele, "温馨提示：", "你真的要删除选中的行吗？", "YNC", function(val) { $.ajax({ type: "post", url: ps.UpdataModel.DelUrl, complete:function() { if (arr.length == grid.display) { if (grid.page > 1 && grid.page == grid.pageCount) grid.page = grid.page - 1; $('.input', fun.pDiv).val(grid.page); } grid.msgCount = grid.msgCount - arr.length; grid.pageCount = Math.ceil((grid.msgCount / grid.pageSize)); $('.count', fun.pDiv).html(grid.pageCount); fun.bind(grid.url, grid.ajaxdata, grid.page, false, grid); }, data: data, async:false, success: function(msg) { returnStr = msg; } }); }); return returnStr; } }; this.addEvent = function(row) { var grid = this; if (this.data.length == ps.PagingToolbar.pageSize) this.data.pop(); var map = new Map(); $.each(row, function(i, n) { map.put(i, n); }); this.data.unshift(map); fun.addData(this.data, false, true); }; this.isSelect = function(tr) { if ($('td:first', tr).find('input').attr("checked") == true) { return true } else { return false } }; this.getRowNo = function(ele) { return ele.attr('index'); }; this.getRow = function(index) { return this.data[parseInt(index)]; }; this.getSelectedByCols = function(nameArr){ var grid = this; var arr = grid.getSelectedRowIndexs(); for(var i=0;i<arr.length;i++){ grid.getRow(arr[i]); } }, this.getSelectedRowIndexs = function() { var grid = this; var i = 0; var indexArr = []; if (ps.selModel == 'CheckModel' || ps.selModel == 'TdSelectionModel') { //CheckModel,TdSelectionModel,RowSelectionModel $('tr', $(fun.bDiv)).each(function(index) { if (grid.isSelect($(this))) { var index = grid.getRowNo($(this)); indexArr[i] = index; i++; } }); return indexArr; } else { $('tr', $(fun.bDiv)).each(function(index) { if ($(this).hasClass('trSelected')) { var index = grid.getRowNo($(this)); indexArr[i] = index; } }); return indexArr; } }; this.getFristSelectRow = function() { return this.getRow(this.getSelectedRowIndexs()[0]); }; this.getSelected = function() { }; this.getTdBySelected = function() { var val = ''; $('tr', $(fun.bDiv)).each(function(index) { var tr = $(this); if (grid.isSelect(tr)) { $(this).find('td').each(function() { if ($(this).hasClass('tdSelected')) { val = grid.data[grid.getRowNo(tr)].getValue($(this).attr('name')); } }) } }); return val; }; this.getNowPage = function() { return grid.page; }; this.hasSelected = function() { if (this.getSelectedRowIndexs().length == 0) { return false; } else { return true; } }; this.setRowHeight = function(rowHeight){ this.rowHeight = rowHeight; }; this.getEditorsTd = function() { return this.find("tr td[editor='true']", $(fun.bDiv)); }; this.getAllTdObj = function() { return this.getAllTrObj().find('td:gt(0)'); }; this.getAllTrObj = function() { return $('tr', $(fun.bDiv)); }; this.getTbarValue = function(ele) { return $('#' + ele, $(fun.tbDiv)).val(); }; this.disabled = function(ele) { typeof ele == 'string' ? $('#' + ele, this).unbind('click').attr("disabled", true).css({ 'color':'#F0F0F0' }) : ele.attr("disabled", true); }; this.usabled = function(ele) { typeof ele == 'string' ? fun.buttonEvent(this.toolbarMap.getValue(ele), $('#' + ele, this).css({ 'color':'#444444' }).attr("disabled", false)) : ele.attr("disabled", false); }; this.reload = function(url, data) { if (url) { this.url = url; this.ajaxdata = data; fun.bind(url, data, 1, true, this); } else { this.ajaxdata = data; fun.bind(this.url, data, this.page, false, this); } }; fun.bodyDiv = document.createElement('div'); fun.mDiv = document.createElement('div'); fun.hDiv = document.createElement('div'); fun.bDiv = document.createElement('div'); fun.tDiv = document.createElement('div'); fun.pDiv = document.createElement('div'); fun.vGrip = document.createElement('div'); fun.pDrag = document.createElement('div'); fun.tbDiv = document.createElement('div'); fun.lDiv = document.createElement('div'); fun.mkDiv = document.createElement('div'); this.initHtml = function() { var grid = this; this.width(ps.width).addClass('flexigrid'); fun.createBody(this); fun.createTitle(this); fun.createToolbar(this); fun.createHr(this); fun.createGbody(this); if (grid.total) fun.createTotal(this); fun.createPager(this); if (ps.hasBotton)fun.createBotton(this); if (ps.dblUpdate) { fun.TrsDblclick(this) } fun.createLoader(this); $(".ptogtitle", $(fun.mDiv)).click(function() { if ($(this).attr('ishide') == 'false') { $(fun.hDiv,fun.bDiv,fun.tbDiv,fun.vGrip,fun.pDiv,fun.tDiv).hide(); $(this).attr('ishide', 'true'); } else { $(fun.hDiv,fun.bDiv,fun.tbDiv,fun.vGrip,fun.pDiv,fun.tDiv).show(); $(this).attr('ishide', 'false'); } }) }; this.init = function () { this.initHtml(); }; this.init(); return this; };})(jQuery);?
?
??? 先写这么多，下一篇文章中我会对部分代码进行注释说明
1 楼 wangdj 2010-12-21 老大你的JS代码可否放开呢 2 楼 cqhydz 2010-12-23 看了一下，我觉得还不如用extjs，代码量好多啊