easyui datagrid 的分页和筛选

筛选用到一个datagrid-filter.js文件，它在easyui的包中是没有的，要自己导入：

代码为

(function($){
function getPluginName(target){
if ($(target).data('treegrid')){
return 'treegrid';
} else {
return 'datagrid';
}
}

var autoSizeColumn1 = $.fn.datagrid.methods.autoSizeColumn;
var loadDataMethod1 = $.fn.datagrid.methods.loadData;
var appendMethod1 = $.fn.datagrid.methods.appendRow;
var deleteMethod1 = $.fn.datagrid.methods.deleteRow;
$.extend($.fn.datagrid.methods, {
autoSizeColumn: function(jq, field){
return jq.each(function(){
var fc = $(this).datagrid('getPanel').find('.datagrid-header .datagrid-filter-c');
// fc.hide();
fc.css({
width:'1px',
height:0
});
autoSizeColumn1.call($.fn.datagrid.methods, $(this), field);
// fc.show();
fc.css({
width:'',
height:''
});
resizeFilter(this, field);
});
},
loadData: function(jq, data){
jq.each(function(){
$.data(this, 'datagrid').filterSource = null;
});
return loadDataMethod1.call($.fn.datagrid.methods, jq, data);
},
appendRow: function(jq, row){
var result = appendMethod1.call($.fn.datagrid.methods, jq, row);
jq.each(function(){
var state = $(this).data('datagrid');
if (state.filterSource){
state.filterSource.total++;
if (state.filterSource.rows != state.data.rows){
state.filterSource.rows.push(row);
}
}
});
return result;
},
deleteRow: function(jq, index){
jq.each(function(){
var state = $(this).data('datagrid');
var opts = state.options;
if (state.filterSource && opts.idField){
if (state.filterSource.rows == state.data.rows){
state.filterSource.total--;
} else {
for(var i=0; i<state.filterSource.rows.length; i++){
var row = state.filterSource.rows[i];
if (row[opts.idField] == state.data.rows[index][opts.idField]){
state.filterSource.rows.splice(i,1);
state.filterSource.total--;
break;
}
}
}
}
});
return deleteMethod1.call($.fn.datagrid.methods, jq, index);
}
});

var loadDataMethod2 = $.fn.treegrid.methods.loadData;
var appendMethod2 = $.fn.treegrid.methods.append;
var insertMethod2 = $.fn.treegrid.methods.insert;
var removeMethod2 = $.fn.treegrid.methods.remove;
$.extend($.fn.treegrid.methods, {
loadData: function(jq, data){
jq.each(function(){
$.data(this, 'treegrid').filterSource = null;
});
return loadDataMethod2.call($.fn.treegrid.methods, jq, data);
},
append: function(jq, param){
return jq.each(function(){
var state = $(this).data('treegrid');
var opts = state.options;
if (opts.oldLoadFilter){
var rows = translateTreeData(this, param.data, param.parent);
state.filterSource.total += rows.length;
state.filterSource.rows = state.filterSource.rows.concat(rows);
$(this).treegrid('loadData', state.filterSource)
} else {
appendMethod2($(this), param);
}
});
},
insert: function(jq, param){
return jq.each(function(){
var state = $(this).data('treegrid');
var opts = state.options;
if (opts.oldLoadFilter){
var ref = param.before || param.after;
var index = getNodeIndex(param.before || param.after);
var pid = index>=0 ? state.filterSource.rows[index]._parentId : null;
var rows = translateTreeData(this, [param.data], pid);
var newRows = state.filterSource.rows.splice(0, index>=0 ? (param.before ? index : index+1) : (state.filterSource.rows.length));
newRows = newRows.concat(rows);
newRows = newRows.concat(state.filterSource.rows);
state.filterSource.total += rows.length;
state.filterSource.rows = newRows;
$(this).treegrid('loadData', state.filterSource);

function getNodeIndex(id){
var rows = state.filterSource.rows;
for(var i=0; i<rows.length; i++){
if (rows[i][opts.idField] == id){
return i;
}
}
return -1;
}
} else {
insertMethod2($(this), param);
}
});
},
remove: function(jq, id){
jq.each(function(){
var state = $(this).data('treegrid');
if (state.filterSource){
var opts = state.options;
var rows = state.filterSource.rows;
for(var i=0; i<rows.length; i++){
if (rows[i][opts.idField] == id){
rows.splice(i, 1);
state.filterSource.total--;
break;
}
}
}
});
return removeMethod2(jq, id);
}
});

var extendedOptions = {
filterMenuIconCls: 'icon-ok',
filterBtnIconCls: 'icon-filter',
filterBtnPosition: 'right',
filterPosition: 'bottom',
remoteFilter: false,
showFilterBar: true,
filterDelay: 400,
filterRules: [],
// specify whether the filtered records need to match ALL or ANY of the applied filters
filterMatchingType: 'all', // possible values: 'all','any'
// filterCache: {},
filterMatcher: function(data){
var name = getPluginName(this);
var dg = $(this);
var state = $.data(this, name);
var opts = state.options;
if (opts.filterRules.length){
var rows = [];
if (name == 'treegrid'){
var rr = {};
$.map(data.rows, function(row){
if (isMatch(row, row[opts.idField])){
rr[row[opts.idField]] = row;
row = getRow(data.rows, row._parentId);
while(row){
rr[row[opts.idField]] = row;
row = getRow(data.rows, row._parentId);
}
}
});
for(var id in rr){
rows.push(rr[id]);
}
} else {
for(var i=0; i<data.rows.length; i++){
var row = data.rows[i];
if (isMatch(row, i)){
rows.push(row);
}
}
}
data = {
total: data.total - (data.rows.length - rows.length),
rows: rows
};
}
return data;

function isMatch(row, index){
var rules = opts.filterRules;
if (!rules.length){return true;}
for(var i=0; i<rules.length; i++){
var rule = rules[i];
var source = row[rule.field];
var col = dg.datagrid('getColumnOption', rule.field);
if (col && col.formatter){
source = col.formatter(row[rule.field], row, index);
}
if (source == undefined){
source = '';
}
var op = opts.operators[rule.op];
// if (!op.isMatch(source, rule.value)){return false}
var matched = op.isMatch(source, rule.value);
if (opts.filterMatchingType == 'any'){
if (matched){return true;}
} else {
if (!matched){return false;}
}
}
return opts.filterMatchingType == 'all';
}
function getRow(rows, id){
for(var i=0; i<rows.length; i++){
var row = rows[i];
if (row[opts.idField] == id){
return row;
}
}
return null;
}
},
defaultFilterType: 'text',
defaultFilterOperator: 'contains',
defaultFilterOptions: {
onInit: function(target){
var name = getPluginName(target);
var opts = $(target)[name]('options');
var field = $(this).attr('name');
var input = $(this);
if (input.data('textbox')){
input = input.textbox('textbox');
}
input.unbind('.filter').bind('keydown.filter', function(e){
var t = $(this);
if (this.timer){
clearTimeout(this.timer);
}
if (e.keyCode == 13){
_doFilter();
} else {
this.timer = setTimeout(function(){
_doFilter();
}, opts.filterDelay);
}
});
function _doFilter(){
var rule = $(target)[name]('getFilterRule', field);
var value = input.val();
if (value != ''){
if ((rule && rule.value!=value) || !rule){
$(target)[name]('addFilterRule', {
field: field,
op: opts.defaultFilterOperator,
value: value
});
$(target)[name]('doFilter');
}
} else {
if (rule){
$(target)[name]('removeFilterRule', field);
$(target)[name]('doFilter');
}
}
}
}
},
filterStringify: function(data){
return JSON.stringify(data);
},
onClickMenu: function(item,button){}
};
$.extend($.fn.datagrid.defaults, extendedOptions);
$.extend($.fn.treegrid.defaults, extendedOptions);

// filter types
$.fn.datagrid.defaults.filters = $.extend({}, $.fn.datagrid.defaults.editors, {
label: {
init: function(container, options){
return $('<span></span>').appendTo(container);
},
getValue: function(target){
return $(target).html();
},
setValue: function(target, value){
$(target).html(value);
},
resize: function(target, width){
$(target)._outerWidth(width)._outerHeight(22);
}
}
});
$.fn.treegrid.defaults.filters = $.fn.datagrid.defaults.filters;

// filter operators
$.fn.datagrid.defaults.operators = {
nofilter: {
text: 'No Filter'
},
contains: {
text: 'Contains',
isMatch: function(source, value){
source = String(source);
value = String(value);
return source.toLowerCase().indexOf(value.toLowerCase()) >= 0;
}
},
equal: {
text: 'Equal',
isMatch: function(source, value){
return source == value;
}
},
notequal: {
text: 'Not Equal',
isMatch: function(source, value){
return source != value;
}
},
beginwith: {
text: 'Begin With',
isMatch: function(source, value){
source = String(source);
value = String(value);
return source.toLowerCase().indexOf(value.toLowerCase()) == 0;
}
},
endwith: {
text: 'End With',
isMatch: function(source, value){
source = String(source);
value = String(value);
return source.toLowerCase().indexOf(value.toLowerCase(), source.length - value.length) !== -1;
}
},
less: {
text: 'Less',
isMatch: function(source, value){
return source < value;
}
},
lessorequal: {
text: 'Less Or Equal',
isMatch: function(source, value){
return source <= value;
}
},
greater: {
text: 'Greater',
isMatch: function(source, value){
return source > value;
}
},
greaterorequal: {
text: 'Greater Or Equal',
isMatch: function(source, value){
return source >= value;
}
}
};
$.fn.treegrid.defaults.operators = $.fn.datagrid.defaults.operators;

function resizeFilter(target, field){
var toFixColumnSize = false;
var dg = $(target);
var header = dg.datagrid('getPanel').find('div.datagrid-header');
var tr = header.find('.datagrid-header-row:not(.datagrid-filter-row)');
var ff = field ? header.find('.datagrid-filter[name="'+field+'"]') : header.find('.datagrid-filter');
ff.each(function(){
var name = $(this).attr('name');
var col = dg.datagrid('getColumnOption', name);
var cc = $(this).closest('div.datagrid-filter-c');
var btn = cc.find('a.datagrid-filter-btn');
var cell = tr.find('td[field="'+name+'"] .datagrid-cell');
var cellWidth = cell._outerWidth();
if (cellWidth != _getContentWidth(cc)){
this.filter.resize(this, cellWidth - btn._outerWidth());
}
if (cc.width() > col.boxWidth+col.deltaWidth-1){
col.boxWidth = cc.width() - col.deltaWidth + 1;
col.width = col.boxWidth + col.deltaWidth;
toFixColumnSize = true;
}
});
if (toFixColumnSize){
$(target).datagrid('fixColumnSize');
}

function _getContentWidth(cc){
var w = 0;
$(cc).children(':visible').each(function(){
w += $(this)._outerWidth();
});
return w;
}
}

function getFilterComponent(target, field){
var header = $(target).datagrid('getPanel').find('div.datagrid-header');
return header.find('tr.datagrid-filter-row td[field="'+field+'"] .datagrid-filter');
}

//
// get filter rule index, return -1 if not found.
//
function getRuleIndex(target, field){
var name = getPluginName(target);
var rules = $(target)[name]('options').filterRules;
for(var i=0; i<rules.length; i++){
if (rules[i].field == field){
return i;
}
}
return -1;
}

function getFilterRule(target, field){
var name = getPluginName(target);
var rules = $(target)[name]('options').filterRules;
var index = getRuleIndex(target, field);
if (index >= 0){
return rules[index];
} else {
return null;
}
}

function addFilterRule(target, param){
var name = getPluginName(target);
var opts = $(target)[name]('options');
var rules = opts.filterRules;

if (param.op == 'nofilter'){
removeFilterRule(target, param.field);
} else {
var index = getRuleIndex(target, param.field);
if (index >= 0){
$.extend(rules[index], param);
} else {
rules.push(param);
}
}

var input = getFilterComponent(target, param.field);
if (input.length){
if (param.op != 'nofilter'){
var value = input.val();
if (input.data('textbox')){
value = input.textbox('getText');
}
if (value != param.value){
input[0].filter.setValue(input, param.value);
}
}
var menu = input[0].menu;
if (menu){
menu.find('.'+opts.filterMenuIconCls).removeClass(opts.filterMenuIconCls);
var item = menu.menu('findItem', opts.operators[param.op]['text']);
menu.menu('setIcon', {
target: item.target,
iconCls: opts.filterMenuIconCls
});
}
}
}

function removeFilterRule(target, field){
var name = getPluginName(target);
var dg = $(target);
var opts = dg[name]('options');
if (field){
var index = getRuleIndex(target, field);
if (index >= 0){
opts.filterRules.splice(index, 1);
}
_clear([field]);
} else {
opts.filterRules = [];
var fields = dg.datagrid('getColumnFields',true).concat(dg.datagrid('getColumnFields'));
_clear(fields);
}

function _clear(fields){
for(var i=0; i<fields.length; i++){
var input = getFilterComponent(target, fields[i]);
if (input.length){
input[0].filter.setValue(input, '');
var menu = input[0].menu;
if (menu){
menu.find('.'+opts.filterMenuIconCls).removeClass(opts.filterMenuIconCls);
}
}
}
}
}

function doFilter(target){

<span style="color:#ff6666;"> //因为我自己写了筛选方法，如果这里再有原有方法的话，就会重复了，而且它的方法对我也没有用，所以这里就注释掉了

// var name = getPluginName(target);
// var state = $.data(target, name);
// var opts = state.options;
// if (opts.remoteFilter){
// $(target)[name]('load');
// } else {
// if (opts.view.type == 'scrollview' && state.data.firstRows && state.data.firstRows.length){
// state.data.rows = state.data.firstRows;
// }
// $(target)[name]('getPager').pagination('refresh', {pageNumber:1});
// $(target)[name]('options').pageNumber = 1;
// $(target)[name]('loadData', state.filterSource || state.data);
// }</span>
}

function translateTreeData(target, children, pid){
var opts = $(target).treegrid('options');
if (!children || !children.length){return []}
var rows = [];
$.map(children, function(item){
item._parentId = pid;
rows.push(item);
rows = rows.concat(translateTreeData(target, item.children, item[opts.idField]));
});
$.map(rows, function(row){
row.children = undefined;
});
return rows;
}

function myLoadFilter(data, parentId){
var target = this;
var name = getPluginName(target);
var state = $.data(target, name);
var opts = state.options;

if (name == 'datagrid' && $.isArray(data)){
data = {
total: data.length,
rows: data
};
} else if (name == 'treegrid' && $.isArray(data)){
var rows = translateTreeData(target, data, parentId);
data = {
total: rows.length,
rows: rows
}
}
if (!opts.remoteFilter){
if (!state.filterSource){
state.filterSource = data;
} else {
if (!opts.isSorting) {
if (name == 'datagrid'){
state.filterSource = data;
} else {
state.filterSource.total += data.length;
state.filterSource.rows = state.filterSource.rows.concat(data.rows);
if (parentId){
return opts.filterMatcher.call(target, data);
}
}
} else {
opts.isSorting = undefined;
}
}
if (!opts.remoteSort && opts.sortName){
var names = opts.sortName.split(',');
var orders = opts.sortOrder.split(',');
var dg = $(target);
state.filterSource.rows.sort(function(r1,r2){
var r = 0;
for(var i=0; i<names.length; i++){
var sn = names[i];
var so = orders[i];
var col = dg.datagrid('getColumnOption', sn);
var sortFunc = col.sorter || function(a,b){
return a==b ? 0 : (a>b?1:-1);
};
r = sortFunc(r1[sn], r2[sn]) * (so=='asc'?1:-1);
if (r != 0){
return r;
}
}
return r;
});
}
data = opts.filterMatcher.call(target, {
total: state.filterSource.total,
rows: state.filterSource.rows
});

if (opts.pagination){
var dg = $(target);
var pager = dg[name]('getPager');
pager.pagination({
onSelectPage:function(pageNum, pageSize){
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
pager.pagination('refresh',{
pageNumber:pageNum,
pageSize:pageSize
});
//dg.datagrid('loadData', state.filterSource);
dg[name]('loadData', state.filterSource);
},
onBeforeRefresh:function(){
dg[name]('reload');
return false;
}
});
if (name == 'datagrid'){
var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
data.rows = data.rows.slice(start, end);
} else {
var topRows = [];
var childRows = [];
$.map(data.rows, function(row){
row._parentId ? childRows.push(row) : topRows.push(row);
});
data.total = topRows.length;
var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
data.rows = topRows.slice(start, end).concat(childRows);
}
}
$.map(data.rows, function(row){
row.children = undefined;
});
}
return data;
}

function init(target, filters){
filters = filters || [];
var name = getPluginName(target);
var state = $.data(target, name);
var opts = state.options;
if (!opts.filterRules.length){
opts.filterRules = [];
}
opts.filterCache = opts.filterCache || {};
var dgOpts = $.data(target, 'datagrid').options;

var onResize = dgOpts.onResize;
dgOpts.onResize = function(width,height){
resizeFilter(target);
onResize.call(this, width, height);
}
var onBeforeSortColumn = dgOpts.onBeforeSortColumn;
dgOpts.onBeforeSortColumn = function(sort, order){
var result = onBeforeSortColumn.call(this, sort, order);
if (result != false){
opts.isSorting = true;
}
return result;
};

var onResizeColumn = opts.onResizeColumn;
opts.onResizeColumn = function(field,width){
var fc = $(this).datagrid('getPanel').find('.datagrid-header .datagrid-filter-c');
var focusOne = fc.find('.datagrid-filter:focus');
fc.hide();
$(target).datagrid('fitColumns');
if (opts.fitColumns){
resizeFilter(target);
} else {
resizeFilter(target, field);
}
fc.show();
focusOne.blur().focus();
onResizeColumn.call(target, field, width);
};
var onBeforeLoad = opts.onBeforeLoad;
opts.onBeforeLoad = function(param1, param2){
if (param1){
param1.filterRules = opts.filterStringify(opts.filterRules);
}
if (param2){
param2.filterRules = opts.filterStringify(opts.filterRules);
}
var result = onBeforeLoad.call(this, param1, param2);
if (result != false && opts.url){
if (name == 'datagrid'){
state.filterSource = null;
} else if (name == 'treegrid' && state.filterSource){
if (param1){
var id = param1[opts.idField]; // the id of the expanding row
var rows = state.filterSource.rows || [];
for(var i=0; i<rows.length; i++){
if (id == rows[i]._parentId){ // the expanding row has children
return false;
}
}
} else {
state.filterSource = null;
}
}
}
return result;
};

// opts.loadFilter = myLoadFilter;
opts.loadFilter = function(data, parentId){
var d = opts.oldLoadFilter.call(this, data, parentId);
return myLoadFilter.call(this, d, parentId);
};

initCss();
createFilter(true);
createFilter();
if (opts.fitColumns){
setTimeout(function(){
resizeFilter(target);
}, 0);
}

$.map(opts.filterRules, function(rule){
addFilterRule(target, rule);
});

function initCss(){
if (!$('#datagrid-filter-style').length){
$('head').append(
'<style id="datagrid-filter-style">' +
'a.datagrid-filter-btn{display:inline-block;width:22px;height:22px;margin:0;vertical-align:top;cursor:pointer;opacity:0.6;filter:alpha(opacity=60);}' +
'a:hover.datagrid-filter-btn{opacity:1;filter:alpha(opacity=100);}' +
'.datagrid-filter-row .textbox,.datagrid-filter-row .textbox .textbox-text{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;}' +
'.datagrid-filter-row input{margin:0;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;}' +
'.datagrid-filter-c{overflow:hidden}' +
'.datagrid-filter-cache{position:absolute;width:10px;height:10px;left:-99999px;}' +
'</style>'
);
}
}

//
// create filter component
//
function createFilter(frozen){
var dc = state.dc;
var fields = $(target).datagrid('getColumnFields', frozen);
if (frozen && opts.rownumbers){
fields.unshift('_');
}
var table = (frozen?dc.header1:dc.header2).find('table.datagrid-htable');

// clear the old filter component
table.find('.datagrid-filter').each(function(){
if (this.filter.destroy){
this.filter.destroy(this);
}
if (this.menu){
$(this.menu).menu('destroy');
}
});
table.find('tr.datagrid-filter-row').remove();

var tr = $('<tr class="datagrid-header-row datagrid-filter-row"></tr>');
if (opts.filterPosition == 'bottom'){
tr.appendTo(table.find('tbody'));
} else {
tr.prependTo(table.find('tbody'));
}
if (!opts.showFilterBar){
tr.hide();
}

for(var i=0; i<fields.length; i++){
var field = fields[i];
var col = $(target).datagrid('getColumnOption', field);
var td = $('<td></td>').attr('field', field).appendTo(tr);
if (col && col.hidden){
td.hide();
}
if (field == '_'){
continue;
}
if (col && (col.checkbox || col.expander)){
continue;
}

var fopts = getFilter(field);
if (fopts){
$(target)[name]('destroyFilter', field); // destroy the old filter component
} else {
fopts = $.extend({}, {
field: field,
type: opts.defaultFilterType,
options: opts.defaultFilterOptions
});
}

var div = opts.filterCache[field];
if (!div){
div = $('<div class="datagrid-filter-c"></div>').appendTo(td);
var filter = opts.filters[fopts.type];
var input = filter.init(div, $.extend({height:24},fopts.options||{}));
input.addClass('datagrid-filter').attr('name', field);
input[0].filter = filter;
input[0].menu = createFilterButton(div, fopts.op);
if (fopts.options){
if (fopts.options.onInit){
fopts.options.onInit.call(input[0], target);
}
} else {
opts.defaultFilterOptions.onInit.call(input[0], target);
}
opts.filterCache[field] = div;
resizeFilter(target, field);
} else {
div.appendTo(td);
}
}
}

function createFilterButton(container, operators){
if (!operators){return null;}

var btn = $('<a class="datagrid-filter-btn"> </a>').addClass(opts.filterBtnIconCls);
if (opts.filterBtnPosition == 'right'){
btn.appendTo(container);
} else {
btn.prependTo(container);
}

var menu = $('<div></div>').appendTo('body');
$.map(['nofilter'].concat(operators), function(item){
var op = opts.operators[item];
if (op){
$('<div></div>').attr('name', item).html(op.text).appendTo(menu);
}
});
menu.menu({
alignTo:btn,
onClick:function(item){
var btn = $(this).menu('options').alignTo;
var td = btn.closest('td[field]');
var field = td.attr('field');
var input = td.find('.datagrid-filter');
var value = input[0].filter.getValue(input);

if (opts.onClickMenu.call(target, item, btn, field) == false){
return;
}

addFilterRule(target, {
field: field,
op: item.name,
value: value
});

doFilter(target);
}
});

btn[0].menu = menu;
btn.bind('click', {menu:menu}, function(e){
$(this.menu).menu('show');
return false;
});
return menu;
}

function getFilter(field){
for(var i=0; i<filters.length; i++){
var filter = filters[i];
if (filter.field == field){
return filter;
}
}
return null;
}
}

$.extend($.fn.datagrid.methods, {
enableFilter: function(jq, filters){
return jq.each(function(){
var name = getPluginName(this);
var opts = $.data(this, name).options;
if (opts.oldLoadFilter){
if (filters){
$(this)[name]('disableFilter');
} else {
return;
}
}
opts.oldLoadFilter = opts.loadFilter;
init(this, filters);
$(this)[name]('resize');
if (opts.filterRules.length){
if (opts.remoteFilter){
doFilter(this);
} else if (opts.data){
doFilter(this);
}
}
});
},
disableFilter: function(jq){
return jq.each(function(){
var name = getPluginName(this);
var state = $.data(this, name);
var opts = state.options;
if (!opts.oldLoadFilter){
return;
}
var dc = $(this).data('datagrid').dc;
var div = dc.view.children('.datagrid-filter-cache');
if (!div.length){
div = $('<div class="datagrid-filter-cache"></div>').appendTo(dc.view);
}
for(var field in opts.filterCache){
$(opts.filterCache[field]).appendTo(div);
}
var data = state.data;
if (state.filterSource){
data = state.filterSource;
$.map(data.rows, function(row){
row.children = undefined;
});
}
dc.header1.add(dc.header2).find('tr.datagrid-filter-row').remove();
opts.loadFilter = opts.oldLoadFilter || undefined;
opts.oldLoadFilter = null;
$(this)[name]('resize');
$(this)[name]('loadData', data);

// $(this)[name]({
// data: data,
// loadFilter: (opts.oldLoadFilter||undefined),
// oldLoadFilter: null
// });
});
},
destroyFilter: function(jq, field){
return jq.each(function(){
var name = getPluginName(this);
var state = $.data(this, name);
var opts = state.options;
if (field){
_destroy(field);
} else {
for(var f in opts.filterCache){
_destroy(f);
}
$(this).datagrid('getPanel').find('.datagrid-header .datagrid-filter-row').remove();
$(this).data('datagrid').dc.view.children('.datagrid-filter-cache').remove();
opts.filterCache = {};
$(this)[name]('resize');
$(this)[name]('disableFilter');
}

function _destroy(field){
var c = $(opts.filterCache[field]);
var input = c.find('.datagrid-filter');
if (input.length){
var filter = input[0].filter;
if (filter.destroy){
filter.destroy(input[0]);
}
}
c.find('.datagrid-filter-btn').each(function(){
$(this.menu).menu('destroy');
});
c.remove();
opts.filterCache[field] = undefined;
}
});
},
getFilterRule: function(jq, field){
return getFilterRule(jq[0], field);
},
addFilterRule: function(jq, param){
return jq.each(function(){
addFilterRule(this, param);
});
},
removeFilterRule: function(jq, field){
return jq.each(function(){
removeFilterRule(this, field);
});
},
doFilter: function(jq){
return jq.each(function(){
doFilter(this);
});
},
getFilterComponent: function(jq, field){
return getFilterComponent(jq[0], field);
},
resizeFilter: function(jq, field){
return jq.each(function(){
resizeFilter(this, field);
});
}
});
})(jQuery);


调用：

$('#searchXmlGrid').datagrid('enableFilter');

分页代码源代码：

var columns=[[
{field:'id',title:'唯一标识符',hidden:true},
{field:'name',title:'名称',width:columnsWidth160,sortable:true},
{field:'type',title:'类型',width:columnsWidth160,sortable:true},
{field:'createUser',title:'创建人',width:columnsWidth160,sortable:true},
{field:'description',title:'描述',width:columnsWidth523-20,sortable:true},
{field:'createTime',title:'创建时间',width:columnsWidth160+10,sortable:true},
{field:'lastTime',title:'最近修改时间',width:columnsWidth160+10,sortable:true},
{field:'updateTimes',title:'更新次数',width:columnsWidth160,sortable:true,align:'right'},
{
title : '操作',
field : '_opt',//不对应数据库或json字段，取的名字
width : columnsWidth160,
formatter:function(value,row,index){ //格式化函数添加一个操作列
var btn = '<div id="'+row.id+'" style="display:none"><input onClick="searchXmlGridDeleteRecord_Record(\''+row.id+'\',\''+row.type+'\')" type="button" class="removeBtn"/><input type="button" onClick="updateXml_Record(\''+row.id+'\',\''+row.type+'\')" class="editBtn"/></div>';
return btn;
}
}
]];

$('#searchXmlGrid').datagrid({
//出现行数
rownumbers:true,
//只能选择一行，若为false，则可以选择多行
singleSelect:true,
//出现分页功能
pagination:true,
url:'php/send.php',
method:'post',
pageSize:20,
columns:columns,
queryParams: {
options_php:'searchXmlGrid_init',
filter:filter
},
loadMsg:"加载中...",
emptyMsg:"没有改配置类型的数据",
//如果没有这个，分页就没有用了，到第二页的时候，数据就为空了
remoteFilter:true,
//出现行斑纹
striped:true,
remoteSort:false,
multiSort:true,
onLoadSuccess:function(){
$(".datagrid-row").mousemove(function(e){
var id = $(this).children("td").eq(0).text().trim();
$("#"+id).css('display','block');
});
$(".datagrid-row").mouseout(function(e){
var id = $(this).children("td").eq(0).text().trim();
$("#"+id).css('display','none');
});
}
});

//这里是用来分页的---------------------------------------------
function pagerFilter(data){
if ($.isArray(data)){ // is array
data = {
total: data.length,
rows: data
}
}
var target = this;
var dg = $(target);
var state = dg.data('datagrid');
var opts = dg.datagrid('options');
if (!state.allRows){
state.allRows = (data.rows);
}
if (!opts.remoteSort && opts.sortName){
var names = opts.sortName.split(',');
var orders = opts.sortOrder.split(',');
state.allRows.sort(function(r1,r2){
var r = 0;
for(var i=0; i<names.length; i++){
var sn = names[i];
var so = orders[i];
var col = $(target).datagrid('getColumnOption', sn);
var sortFunc = col.sorter || function(a,b){
return a==b ? 0 : (a>b?1:-1);
};
r = sortFunc(r1[sn], r2[sn]) * (so=='asc'?1:-1);
if (r != 0){
return r;
}
}
return r;
});
}
var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
data.rows = state.allRows.slice(start, end);
return data;
}
var loadDataMethod = $.fn.datagrid.methods.loadData;
var deleteRowMethod = $.fn.datagrid.methods.deleteRow;
$.extend($.fn.datagrid.methods, {
clientPaging: function(jq){
return jq.each(function(){
var dg = $(this);
var state = dg.data('datagrid');
var opts = state.options;
opts.loadFilter = pagerFilter;
var onBeforeLoad = opts.onBeforeLoad;
opts.onBeforeLoad = function(param){
state.allRows = null;
return onBeforeLoad.call(this, param);
}
var pager = dg.datagrid('getPager');
pager.pagination({
onSelectPage:function(pageNum, pageSize){
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
pager.pagination('refresh',{
pageNumber:pageNum,
pageSize:pageSize
});
dg.datagrid('loadData',state.allRows);
}
});
$(this).datagrid('loadData', state.data);
if (opts.url){
$(this).datagrid('reload');
}
});
},
loadData: function(jq, data){
jq.each(function(){
$(this).data('datagrid').allRows = null;
});
return loadDataMethod.call($.fn.datagrid.methods, jq, data);
},
deleteRow: function(jq, index){
return jq.each(function(){
var row = $(this).datagrid('getRows')[index];
deleteRowMethod.call($.fn.datagrid.methods, $(this), index);
var state = $(this).data('datagrid');
if (state.options.loadFilter == pagerFilter){
for(var i=0; i<state.allRows.length; i++){
if (state.allRows[i] == row){
state.allRows.splice(i,1);
break;
}
}
$(this).datagrid('loadData', state.allRows);
}
});
},
getAllRows: function(jq){
return jq.data('datagrid').allRows;
}
});

// function getData(){
// var rows = [];
//
// //最终发现是这个耗时太长了
//
//// for(var i=1; i<=800; i++){
//// var amount = Math.floor(Math.random()*1000);
//// var price = Math.floor(Math.random()*1000);
//// rows.push({
//// inv: 'Inv No '+i,
//// date: $.fn.datebox.defaults.formatter(new Date()),
//// name: 'Name '+i,
//// amount: amount,
//// price: price,
//// cost: amount*price,
//// note: 'Note '+i
//// });
//// }
// return rows;
// }

$('#searchXmlGrid').datagrid('clientPaging');

/*
* 是它拖慢了整个页面的生成的节奏，它一个人耗掉了95%以上的时间。
* $('#searchXmlGrid').datagrid({data:getData()}).datagrid('clientPaging');
*/
// $('#searchXmlGrid').datagrid({data:getData()}).datagrid('clientPaging');
//这里面的.datagrid({data:getData()})要不要一样，不要它的话，速度快乐10倍多。
// $('#searchXmlGrid').datagrid({data:getData()}).datagrid('clientPaging');
//--------------------------------------------------------------------------

var pager = $('#searchXmlGrid').datagrid().datagrid('getPager'); // get the pager of datagrid
pager.pagination({
buttons:[{
iconCls:'icon-edit',
handler:function(){
var record=$('#searchXmlGrid').datagrid("getSelected");
if(record==null){
$.messager.alert('警告','请选择一行数据!','warning');
//设置这个对话框的位置。
var winTop=(document.documentElement.clientHeight/2-77)+'px',winLeft=(document.documentElement.clientWidth/2-145)+'px';
$('.window.messager-window').css({'position':'fixed','top':winTop,'left':winLeft});
$('.window-shadow').css({'position':'fixed','top':winTop,'left':winLeft});
}else{
updateXml(record.id,record.type);
}
}
},{
iconCls:'icon-remove',
handler:function(){
var record=$('#searchXmlGrid').datagrid("getSelected");
if(record==null){
alert("请选择一行数据");
}else{
searchXmlGridDeleteRecord(record.id,record.type);
}
}
},{
iconCls:'icon-add',
handler:function(){
var flag=false;
$.ajax({
type:"post",
async:false,
url:"php/send.php",
data:{
"options_php":"DTDType_select"
},
dataType:"json",
success:function(data){
if(data["success"]==true){
var ary=data["data"];
for(var key in ary){
if(ary[key]==filter["type"]){
flag=true;
}
}
}
else{
$.messager.alert('提示','连接服务器失败!','error');
//设置这个对话框的位置。
var winTop=(document.documentElement.clientHeight/2-77)+'px',winLeft=(document.documentElement.clientWidth/2-145)+'px';
$('.window.messager-window').css({'position':'fixed','top':winTop,'left':winLeft});
$('.window-shadow').css({'position':'fixed','top':winTop,'left':winLeft});
}
},
error:function(e){
$.messager.alert('提示','连接服务器失败!','error');
//设置这个对话框的位置。
var winTop=(document.documentElement.clientHeight/2-77)+'px',winLeft=(document.documentElement.clientWidth/2-145)+'px';
$('.window.messager-window').css({'position':'fixed','top':winTop,'left':winLeft});
$('.window-shadow').css({'position':'fixed','top':winTop,'left':winLeft});
}
});

if(flag){
addNewXml(filter["type"]);
}
else{
addNewXml("房晓菲");
}

}
}]
});

$('#searchXmlGrid').datagrid('enableFilter');

//将筛选框中进行初始化赋值
$(".datagrid-editable-input.datagrid-filter")[1].value=filter["name"];
$(".datagrid-editable-input.datagrid-filter")[2].value=filter["type"];
$(".datagrid-editable-input.datagrid-filter")[3].value=filter["createUser"];
$(".datagrid-editable-input.datagrid-filter")[4].value=filter["description"];
$(".datagrid-editable-input.datagrid-filter")[5].value=filter["createTime"];
$(".datagrid-editable-input.datagrid-filter")[6].value=filter["lastTime"];
$(".datagrid-editable-input.datagrid-filter")[7].value=filter["updateTimes"];

$(".datagrid-editable-input.datagrid-filter").on("change",function(){
var filter={};
var textboxAry=$(".datagrid-editable-input.datagrid-filter");
for(var i=0;i<textboxAry.length;i++){
filter[textboxAry[i].name]=textboxAry[i].value;
}
filter["type"]=filter["type"];
$("#tabsPanel").tabs('close','配置信息列表');
hyperlinkInit(filter);
});
// if($("#searchXml .datagrid .datagrid-view")[0].scrollHeight<maxHeight-160){
// var searchXmlHeight=(maxHeight-160)+'px';
// $("#searchXml .datagrid .datagrid-view").css('height',searchXmlHeight);
//
// $(".datagrid .datagrid-pager").css({'top':searchXmlHeight-40,'position':'absolute'});
// }
// else{
//// var searchXmlHeight=$("#searchXml .datagrid")[0].scrollHeight;
//// $(".datagrid .datagrid-pager").css('top',searchXmlHeight);
// var searchXmlHeight=$("#searchXml .datagrid .datagrid-view")[0].scrollHeight-40;
// $(".datagrid .datagrid-pager").css({'top':searchXmlHeight,'position':'absolute'});
// }