jquery的Flexigrid改造，支持选中行内容获取，两个表格行相互移动，行选中事件，支持dwr

在flexigrid中增加了

$.fn.flexGetRows = function () { // function to add data to grid danielinbiti
return this[0].grid.getRows();
};
$.fn.addRows = function (rowList) { // function to add data to grid danielinbiti
return this[0].grid.addRows(rowList);
};
$.fn.getSelectRowsToGrid = function () { // function to add data to grid danielinbiti
return this[0].grid.getSelectRowsToGrid();
};
$.fn.getGridAllRows = function () { // function to add data to grid danielinbiti
return this[0].grid.getGridAllRows();
};
$.fn.getGridAllRowsForObj = function () { // function to add data to grid danielinbiti
return this[0].grid.getGridAllRowsForObj();
};
$.fn.clearSelect = function () { // function to add data to grid danielinbiti
return this[0].grid.clearSelect();
};
$.fn.deleteSelectRows = function () { // function to add data to grid danielinbiti
return this[0].grid.deleteSelectRows();
};
$.fn.queryData = function (params) { // function to add data to grid danielinbiti
return this[0].grid.queryData(params);
};

增加了行选中方法参数

onRowClick:function(){return true},//add by danielinbiti

Flexigrid的改造后源码

/*
* Flexigrid for jQuery -  v1.1
*
* Copyright (c) 2008 Paulo P. Marinas (code.google.com/p/flexigrid/)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license *
*/
(function ($) {
$.addFlex = function (t, p) {
if (t.grid) return false; //return if already exist
p = $.extend({ //apply default properties
height: 200, //default height
width: 'auto', //auto width
striped: true, //apply odd even stripes
novstripe: false,
minwidth: 30, //min width of columns
minheight: 80, //min height of columns
resizable: true, //allow table resizing
url: false, //URL if using data from AJAX
dwrAction:function(){},
method: 'POST', //data sending method
dataType: 'xml', //type of data for AJAX, either xml or json
errormsg: 'Connection Error',
usepager: false,
nowrap: true,
page: 1, //current page
total: 1, //total pages
useRp: true, //use the results per page select box
rp: 15, //results per page
rpOptions: [10, 15, 20, 30, 50], //allowed per-page values
title: false,
pagestat: 'Displaying {from} to {to} of {total} items',
pagetext: 'Page',
outof: 'of',
findtext: 'Find',
procmsg: 'Processing, please wait ...',
query: '',
qtype: '',
nomsg: 'No items',
minColToggle: 1, //minimum allowed column to be hidden
showToggleBtn: true, //show or hide column toggle popup
hideOnSubmit: true,
autoload: true,
blockOpacity: 0.5,
preProcess: false,
onDragCol: false,
onToggleCol: false,
onChangeSort: false,
onSuccess: false,
onError: false,
onRowClick:function(){return true},//add by jej
onSubmit: false //using a custom populate function
}, p);
$(t).show() //show if hidden
.attr({
cellPadding: 0,
cellSpacing: 0,
border: 0
}) //remove padding and spacing
.removeAttr('width'); //remove width properties
//create grid class
var g = {
hset: {},
rePosDrag: function () {
var cdleft = 0 - this.hDiv.scrollLeft;
if (this.hDiv.scrollLeft > 0) cdleft -= Math.floor(p.cgwidth / 2);
$(g.cDrag).css({
top: g.hDiv.offsetTop + 1
});
var cdpad = this.cdpad;
$('div', g.cDrag).hide();
$('thead tr:first th:visible', this.hDiv).each(function () {
var n = $('thead tr:first th:visible', g.hDiv).index(this);
var cdpos = parseInt($('div', this).width());
if (cdleft == 0) cdleft -= Math.floor(p.cgwidth / 2);
cdpos = cdpos + cdleft + cdpad;
if (isNaN(cdpos)) {
cdpos = 0;
}
$('div:eq(' + n + ')', g.cDrag).css({
'left': cdpos + 'px'
}).show();
cdleft = cdpos;
});
},
fixHeight: function (newH) {
newH = false;
if (!newH) newH = $(g.bDiv).height();
var hdHeight = $(this.hDiv).height();
$('div', this.cDrag).each(
function () {
$(this).height(newH + hdHeight);
}
);
var nd = parseInt($(g.nDiv).height());
if (nd > newH) $(g.nDiv).height(newH).width(200);
else $(g.nDiv).height('auto').width('auto');
$(g.block).css({
height: newH,
marginBottom: (newH * -1)
});
var hrH = g.bDiv.offsetTop + newH;
if (p.height != 'auto' && p.resizable) hrH = g.vDiv.offsetTop;
$(g.rDiv).css({
height: hrH
});
},
dragStart: function (dragtype, e, obj) { //default drag function start
if (dragtype == 'colresize') {//column resize
$(g.nDiv).hide();
$(g.nBtn).hide();
var n = $('div', this.cDrag).index(obj);
var ow = $('th:visible div:eq(' + n + ')', this.hDiv).width();
$(obj).addClass('dragging').siblings().hide();
$(obj).prev().addClass('dragging').show();
this.colresize = {
startX: e.pageX,
ol: parseInt(obj.style.left),
ow: ow,
n: n
};
$('body').css('cursor', 'col-resize');
} else if (dragtype == 'vresize') {//table resize
var hgo = false;
$('body').css('cursor', 'row-resize');
if (obj) {
hgo = true;
$('body').css('cursor', 'col-resize');
}
this.vresize = {
h: p.height,
sy: e.pageY,
w: p.width,
sx: e.pageX,
hgo: hgo
};
} else if (dragtype == 'colMove') {//column header drag
$(g.nDiv).hide();
$(g.nBtn).hide();
this.hset = $(this.hDiv).offset();
this.hset.right = this.hset.left + $('table', this.hDiv).width();
this.hset.bottom = this.hset.top + $('table', this.hDiv).height();
this.dcol = obj;
this.dcoln = $('th', this.hDiv).index(obj);
this.colCopy = document.createElement("div");
this.colCopy.className = "colCopy";
this.colCopy.innerHTML = obj.innerHTML;
if ($.browser.msie) {
this.colCopy.className = "colCopy ie";
}
$(this.colCopy).css({
position: 'absolute',
float: 'left',
display: 'none',
textAlign: obj.align
});
$('body').append(this.colCopy);
$(this.cDrag).hide();
}
$('body').noSelect();
},
dragMove: function (e) {
if (this.colresize) {//column resize
var n = this.colresize.n;
var diff = e.pageX - this.colresize.startX;
var nleft = this.colresize.ol + diff;
var nw = this.colresize.ow + diff;
if (nw > p.minwidth) {
$('div:eq(' + n + ')', this.cDrag).css('left', nleft);
this.colresize.nw = nw;
}
} else if (this.vresize) {//table resize
var v = this.vresize;
var y = e.pageY;
var diff = y - v.sy;
if (!p.defwidth) p.defwidth = p.width;
if (p.width != 'auto' && !p.nohresize && v.hgo) {
var x = e.pageX;
var xdiff = x - v.sx;
var newW = v.w + xdiff;
if (newW > p.defwidth) {
this.gDiv.style.width = newW + 'px';
p.width = newW;
}
}
var newH = v.h + diff;
if ((newH > p.minheight || p.height < p.minheight) && !v.hgo) {
this.bDiv.style.height = newH + 'px';
p.height = newH;
this.fixHeight(newH);
}
v = null;
} else if (this.colCopy) {
$(this.dcol).addClass('thMove').removeClass('thOver');
if (e.pageX > this.hset.right || e.pageX < this.hset.left || e.pageY > this.hset.bottom || e.pageY < this.hset.top) {
//this.dragEnd();
$('body').css('cursor', 'move');
} else {
$('body').css('cursor', 'pointer');
}
$(this.colCopy).css({
top: e.pageY + 10,
left: e.pageX + 20,
display: 'block'
});
}
},
dragEnd: function () {
if (this.colresize) {
var n = this.colresize.n;
var nw = this.colresize.nw;
$('th:visible div:eq(' + n + ')', this.hDiv).css('width', nw);
$('tr', this.bDiv).each(
function () {
$('td:visible div:eq(' + n + ')', this).css('width', nw);
}
);
this.hDiv.scrollLeft = this.bDiv.scrollLeft;
$('div:eq(' + n + ')', this.cDrag).siblings().show();
$('.dragging', this.cDrag).removeClass('dragging');
this.rePosDrag();
this.fixHeight();
this.colresize = false;
} else if (this.vresize) {
this.vresize = false;
} else if (this.colCopy) {
$(this.colCopy).remove();
if (this.dcolt != null) {
if (this.dcoln > this.dcolt) $('th:eq(' + this.dcolt + ')', this.hDiv).before(this.dcol);
else $('th:eq(' + this.dcolt + ')', this.hDiv).after(this.dcol);
this.switchCol(this.dcoln, this.dcolt);
$(this.cdropleft).remove();
$(this.cdropright).remove();
this.rePosDrag();
if (p.onDragCol) {
p.onDragCol(this.dcoln, this.dcolt);
}
}
this.dcol = null;
this.hset = null;
this.dcoln = null;
this.dcolt = null;
this.colCopy = null;
$('.thMove', this.hDiv).removeClass('thMove');
$(this.cDrag).show();
}
$('body').css('cursor', 'default');
$('body').noSelect(false);
},
toggleCol: function (cid, visible) {
var ncol = $("th[axis='col" + cid + "']", this.hDiv)[0];
var n = $('thead th', g.hDiv).index(ncol);
var cb = $('input[value=' + cid + ']', g.nDiv)[0];
if (visible == null) {
visible = ncol.hidden;
}
if ($('input:checked', g.nDiv).length < p.minColToggle && !visible) {
return false;
}
if (visible) {
ncol.hidden = false;
$(ncol).show();
cb.checked = true;
} else {
ncol.hidden = true;
$(ncol).hide();
cb.checked = false;
}
$('tbody tr', t).each(
function () {
if (visible) {
$('td:eq(' + n + ')', this).show();
} else {
$('td:eq(' + n + ')', this).hide();
}
}
);
this.rePosDrag();
if (p.onToggleCol) {
p.onToggleCol(cid, visible);
}
return visible;
},
switchCol: function (cdrag, cdrop) { //switch columns
$('tbody tr', t).each(
function () {
if (cdrag > cdrop) $('td:eq(' + cdrop + ')', this).before($('td:eq(' + cdrag + ')', this));
else $('td:eq(' + cdrop + ')', this).after($('td:eq(' + cdrag + ')', this));
}
);
//switch order in nDiv
if (cdrag > cdrop) {
$('tr:eq(' + cdrop + ')', this.nDiv).before($('tr:eq(' + cdrag + ')', this.nDiv));
} else {
$('tr:eq(' + cdrop + ')', this.nDiv).after($('tr:eq(' + cdrag + ')', this.nDiv));
}
if ($.browser.msie && $.browser.version < 7.0) {
$('tr:eq(' + cdrop + ') input', this.nDiv)[0].checked = true;
}
this.hDiv.scrollLeft = this.bDiv.scrollLeft;
},
scroll: function () {
this.hDiv.scrollLeft = this.bDiv.scrollLeft;
this.rePosDrag();
},
getRows: function(){
//add by jej
var rtnList = new Array();
var objRows = $('.trSelected', $(t));
if(objRows!=null){
for(var i=0;i<objRows.length;i++){
var row = objRows[i];
var rowMap = new Object();
for(var j=0;j<row.cells.length;j++){
var cellName = p.colModel[j].name;
var value = row.cells[j].innerText;
value=value.replace(/^\n+|\n+$/g,"");
var s = "rowMap." + cellName + '="'+ value + '"';
eval(s);
}
rtnList[rtnList.length] = rowMap;
}
}
return rtnList;
},
getSelectRowsToGrid: function(){
//add by jej
var rtnList = new Array();
var objRows = $('.trSelected', $(t));
if(objRows!=null){
for(var i=0;i<objRows.length;i++){
var row = objRows[i];
var arr = new Array();
for(var j=0;j<row.cells.length;j++){
var value = row.cells[j].innerText;
value=value.replace(/^\n+|\n+$/g,"");
arr[j] = value;
}
rtnList[rtnList.length] = arr;
}
}
return rtnList;
},
strToJson:function(str){
var json = eval('(' + str + ')');
return json;
},
getGridAllRows :function(){
var rtnList = new Array();
$('tbody tr',$(t)).each(function () {
var arr = new Array();
for(var i=0;i<this.cells.length;i++){
var value = this.cells[i].innerText;
value=value.replace(/^\n+|\n+$/g,"");
arr[i] = value;
}
rtnList[rtnList.length] = arr;
})
return rtnList;
},
getGridAllRowsForObj :function(){
var rtnList = new Array();
$('tbody tr',$(t)).each(function () {
var rowMap = new Object();
for(var i=0;i<this.cells.length;i++){
var cellName = p.colModel[i].name;
var value = this.cells[i].innerText;
value=value.replace(/^\n+|\n+$/g,"");
var s = "rowMap." + cellName + '="'+ value + '"';
eval(s)
}
rtnList[rtnList.length] = rowMap;
})
return rtnList;
},
clearSelect:function(){
var objRows = $('.trSelected', $(t));
for(var i=0;i<objRows.length;i++){
$(objRows[i]).removeClass('trSelected');
}
},
deleteSelectRows:function(){
var objRows = $('.trSelected', $(t));
for(var i=0;i<objRows.length;i++){
$(objRows[i]).remove();
}
},
addRows:function(inrowList){
if(inrowList&&inrowList.length>0){
var rowList = this.getGridAllRows();
for(var i=0;i<inrowList.length;i++){
rowList[rowList.length] = inrowList[i];
}
var str = '{"total":"1","page":"0","rows":[';
for(var i=0;i<rowList.length;i++){
var rowArr = rowList[i];
var rowstr = '{"id":"'+i+'","cell":[';
for(var j=0;j<rowArr.length;j++){
if(j>0){
rowstr = rowstr + ',';
}
rowstr = rowstr + '"' + rowArr[j] + '"';
}
rowstr = rowstr + ']}';
if(i>0){
str = str + ',';
}
str = str + rowstr;
}
str = str + ']}';
var inData = this.strToJson(str);
//var tbodylist = $('tbody', $(t));
//var flag = false;
//if(tbodylist.length>0){
//	flag = true;
//}
this.addData(inData,false);
}
},
addData: function (data,isAppend) { //parse data
if (p.dataType == 'json') {
data = $.extend({rows: [], page: 0, total: 0}, data);
}
if (p.preProcess) {
data = p.preProcess(data);
}
$('.pReload', this.pDiv).removeClass('loading');
this.loading = false;
if (!data) {
$('.pPageStat', this.pDiv).html(p.errormsg);
return false;
}
if (p.dataType == 'xml') {
p.total = +$('rows total', data).text();
} else {
p.total = data.total;
}
if (p.total == 0) {
$('tr, a, td, div', t).unbind();
$(t).empty();
p.pages = 1;
p.page = 1;
this.buildpager();
$('.pPageStat', this.pDiv).html(p.nomsg);
return false;
}
p.pages = Math.ceil(p.total / p.rp);
if (p.dataType == 'xml') {
p.page = +$('rows page', data).text();
} else {
p.page = data.page;
}
this.buildpager();
//build new body
var tbody = null;
if(isAppend){
var tbodylist = $('tbody', $(t));
tbody = tbodylist[0];
}else{
tbody = document.createElement('tbody');
}
if (p.dataType == 'json') {
$.each(data.rows, function (i, row) {
var tr = document.createElement('tr');
if (i % 2 && p.striped) {
tr.className = 'erow';
}
if (row.id) {
tr.id = 'row' + row.id;
}
$('thead tr:first th', g.hDiv).each( //add cell
function () {
var td = document.createElement('td');
var idx = $(this).attr('axis').substr(3);
td.align = this.align;
// If the json elements aren't named (which is typical), use numeric order
if (typeof row.cell[idx] != "undefined") {
td.innerHTML = (row.cell[idx] != null) ? row.cell[idx] : '';//null-check for Opera-browser
} else {
td.innerHTML = row.cell[p.colModel[idx].name];
}
$(td).attr('abbr', $(this).attr('abbr'));
$(tr).append(td);
td = null;
}
);
if ($('thead', this.gDiv).length < 1) {//handle if grid has no headers
for (idx = 0; idx < cell.length; idx++) {
var td = document.createElement('td');
// If the json elements aren't named (which is typical), use numeric order
if (typeof row.cell[idx] != "undefined") {
td.innerHTML = (row.cell[idx] != null) ? row.cell[idx] : '';//null-check for Opera-browser
} else {
td.innerHTML = row.cell[p.colModel[idx].name];
}
$(tr).append(td);
td = null;
}
}
$(tbody).append(tr);
tr = null;
});
} else if (p.dataType == 'xml') {
var i = 1;
$("rows row", data).each(function () {
i++;
var tr = document.createElement('tr');
if (i % 2 && p.striped) {
tr.className = 'erow';
}
var nid = $(this).attr('id');
if (nid) {
tr.id = 'row' + nid;
}
nid = null;
var robj = this;
$('thead tr:first th', g.hDiv).each(function () {
var td = document.createElement('td');
var idx = $(this).attr('axis').substr(3);
td.align = this.align;
td.innerHTML = $("cell:eq(" + idx + ")", robj).text();
$(td).attr('abbr', $(this).attr('abbr'));
$(tr).append(td);
td = null;
});
if ($('thead', this.gDiv).length < 1) {//handle if grid has no headers
$('cell', this).each(function () {
var td = document.createElement('td');
td.innerHTML = $(this).text();
$(tr).append(td);
td = null;
});
}
$(tbody).append(tr);
tr = null;
robj = null;
});
}
$('tr', t).unbind();
if(!isAppend){
$(t).empty();
$(t).append(tbody);
}
this.addCellProp();
this.addRowProp();
this.rePosDrag();
tbody = null;
data = null;
i = null;
if (p.onSuccess) {
p.onSuccess(this);
}
if (p.hideOnSubmit) {
$(g.block).remove();
}
this.hDiv.scrollLeft = this.bDiv.scrollLeft;
if ($.browser.opera) {
$(t).css('visibility', 'visible');
}
},
changeSort: function (th) { //change sortorder
if (this.loading) {
return true;
}
$(g.nDiv).hide();
$(g.nBtn).hide();
if (p.sortname == $(th).attr('abbr')) {
if (p.sortorder == 'asc') {
p.sortorder = 'desc';
} else {
p.sortorder = 'asc';
}
}
$(th).addClass('sorted').siblings().removeClass('sorted');
$('.sdesc', this.hDiv).removeClass('sdesc');
$('.sasc', this.hDiv).removeClass('sasc');
$('div', th).addClass('s' + p.sortorder);
p.sortname = $(th).attr('abbr');
if (p.onChangeSort) {
p.onChangeSort(p.sortname, p.sortorder);
} else {
this.populate();
}
},
buildpager: function () { //rebuild pager based on new properties
$('.pcontrol input', this.pDiv).val(p.page);
$('.pcontrol span', this.pDiv).html(p.pages);
var r1 = (p.page - 1) * p.rp + 1;
var r2 = r1 + p.rp - 1;
if (p.total < r2) {
r2 = p.total;
}
var stat = p.pagestat;
stat = stat.replace(/{from}/, r1);
stat = stat.replace(/{to}/, r2);
stat = stat.replace(/{total}/, p.total);
$('.pPageStat', this.pDiv).html(stat);
},
queryData:function(params){
this.populate(params);
},
populate: function (queryCond) { //get latest data
if (this.loading) {
return true;
}
if (p.onSubmit) {
var gh = p.onSubmit();
if (!gh) {
return false;
}
}
this.loading = true;
if (!p.url) {
return false;
}
$('.pPageStat', this.pDiv).html(p.procmsg);
$('.pReload', this.pDiv).addClass('loading');
$(g.block).css({
top: g.bDiv.offsetTop
});
if (p.hideOnSubmit) {
$(this.gDiv).prepend(g.block);
}
if ($.browser.opera) {
$(t).css('visibility', 'hidden');
}
if (!p.newp) {
p.newp = 1;
}
if (p.page > p.pages) {
p.page = p.pages;
}
var param = [{
name: 'page',
value: p.newp
}, {
name: 'rp',
value: p.rp
}, {
name: 'sortname',
value: p.sortname
}, {
name: 'sortorder',
value: p.sortorder
}, {
name: 'query',
value: p.query
}, {
name: 'qtype',
value: p.qtype
}];
if(queryCond!=null){
param[param.length]={name:"queryCond",value:queryCond};
};
if (p.params) {
for (var pi = 0; pi < p.params.length; pi++) {
param[param.length] = p.params[pi];
}
}
if(p.method=='dwr'){
if(typeof p.dwrAction =="function"){
p.dwrAction(param);
}
}else{
$.ajax({
type: p.method,
url: p.url,
data: param,
dataType: p.dataType,
success: function (data) {
g.addData(data);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
try {
if (p.onError) p.onError(XMLHttpRequest, textStatus, errorThrown);
} catch (e) {}
}
});
}
},
doSearch: function () {
p.query = $('input[name=q]', g.sDiv).val();
p.qtype = $('select[name=qtype]', g.sDiv).val();
p.newp = 1;
this.populate();
},
changePage: function (ctype) { //change page
if (this.loading) {
return true;
}
switch (ctype) {
case 'first':
p.newp = 1;
break;
case 'prev':
if (p.page > 1) {
p.newp = parseInt(p.page) - 1;
}
break;
case 'next':
if (p.page < p.pages) {
p.newp = parseInt(p.page) + 1;
}
break;
case 'last':
p.newp = p.pages;
break;
case 'input':
var nv = parseInt($('.pcontrol input', this.pDiv).val());
if (isNaN(nv)) {
nv = 1;
}
if (nv < 1) {
nv = 1;
} else if (nv > p.pages) {
nv = p.pages;
}
$('.pcontrol input', this.pDiv).val(nv);
p.newp = nv;
break;
}
if (p.newp == p.page) {
return false;
}
if (p.onChangePage) {
p.onChangePage(p.newp);
} else {
this.populate();
}
},
addCellProp: function () {
$('tbody tr td', g.bDiv).each(function () {
var tdDiv = document.createElement('div');
var n = $('td', $(this).parent()).index(this);
var pth = $('th:eq(' + n + ')', g.hDiv).get(0);
if (pth != null) {
if (p.sortname == $(pth).attr('abbr') && p.sortname) {
this.className = 'sorted';
}
$(tdDiv).css({
textAlign: pth.align,
width: $('div:first', pth)[0].style.width
});
if (pth.hidden) {
$(this).css('display', 'none');
}
}
if (p.nowrap == false) {
$(tdDiv).css('white-space', 'normal');
}
if (this.innerHTML == '') {
this.innerHTML = ' ';
}
tdDiv.innerHTML = this.innerHTML;
var prnt = $(this).parent()[0];
var pid = false;
if (prnt.id) {
pid = prnt.id.substr(3);
}
if (pth != null) {
if (pth.process) pth.process(tdDiv, pid);
}
$(this).empty().append(tdDiv).removeAttr('width'); //wrap content
});
},
getCellDim: function (obj) {// get cell prop for editable event
var ht = parseInt($(obj).height());
var pht = parseInt($(obj).parent().height());
var wt = parseInt(obj.style.width);
var pwt = parseInt($(obj).parent().width());
var top = obj.offsetParent.offsetTop;
var left = obj.offsetParent.offsetLeft;
var pdl = parseInt($(obj).css('paddingLeft'));
var pdt = parseInt($(obj).css('paddingTop'));
return {
ht: ht,
wt: wt,
top: top,
left: left,
pdl: pdl,
pdt: pdt,
pht: pht,
pwt: pwt
};
},
addRowProp: function () {
$('tbody tr', g.bDiv).each(function () {
$(this).click(function (e) {
var obj = (e.target || e.srcElement);
if (obj.href || obj.type) return true;
$(this).toggleClass('trSelected');
if (p.singleSelect) $(this).siblings().removeClass('trSelected');
if(p.onRowClick && typeof(p.onRowClick)=='function'){
p.onRowClick(e);
}
}).mousedown(function (e) {
if (e.shiftKey) {
$(this).toggleClass('trSelected');
g.multisel = true;
this.focus();
$(g.gDiv).noSelect();
}
}).mouseup(function () {
if (g.multisel) {
g.multisel = false;
$(g.gDiv).noSelect(false);
}
}).hover(function (e) {
if (g.multisel) {
$(this).toggleClass('trSelected');
}
}, function () {});
if ($.browser.msie && $.browser.version < 7.0) {
$(this).hover(function () {
$(this).addClass('trOver');
}, function () {
$(this).removeClass('trOver');
});
}
});
},
pager: 0
};
if (p.colModel) { //create model if any
thead = document.createElement('thead');
var tr = document.createElement('tr');
for (var i = 0; i < p.colModel.length; i++) {
var cm = p.colModel[i];
var th = document.createElement('th');
th.innerHTML = cm.display;
if (cm.name && cm.sortable) {
$(th).attr('abbr', cm.name);
}
$(th).attr('axis', 'col' + i);
if (cm.align) {
th.align = cm.align;
}
if (cm.width) {
$(th).attr('width', cm.width);
}
if ($(cm).attr('hide')) {
th.hidden = true;
}
if (cm.process) {
th.process = cm.process;
}
$(tr).append(th);
}
$(thead).append(tr);
$(t).prepend(thead);
} // end if p.colmodel
//init divs
g.gDiv = document.createElement('div'); //create global container
g.mDiv = document.createElement('div'); //create title container
g.hDiv = document.createElement('div'); //create header container
g.bDiv = document.createElement('div'); //create body container
g.vDiv = document.createElement('div'); //create grip
g.rDiv = document.createElement('div'); //create horizontal resizer
g.cDrag = document.createElement('div'); //create column drag
g.block = document.createElement('div'); //creat blocker
g.nDiv = document.createElement('div'); //create column show/hide popup
g.nBtn = document.createElement('div'); //create column show/hide button
g.iDiv = document.createElement('div'); //create editable layer
g.tDiv = document.createElement('div'); //create toolbar
g.sDiv = document.createElement('div');
g.pDiv = document.createElement('div'); //create pager container
if (!p.usepager) {
g.pDiv.style.display = 'none';
}
g.hTable = document.createElement('table');
g.gDiv.className = 'flexigrid';
if (p.width != 'auto') {
g.gDiv.style.width = p.width + 'px';
}
//add conditional classes
if ($.browser.msie) {
$(g.gDiv).addClass('ie');
}
if (p.novstripe) {
$(g.gDiv).addClass('novstripe');
}
$(t).before(g.gDiv);
$(g.gDiv).append(t);
//set toolbar
if (p.buttons) {
g.tDiv.className = 'tDiv';
var tDiv2 = document.createElement('div');
tDiv2.className = 'tDiv2';
for (var i = 0; i < p.buttons.length; i++) {
var btn = p.buttons[i];
if (!btn.separator) {
var btnDiv = document.createElement('div');
btnDiv.className = 'fbutton';
btnDiv.innerHTML = "<div><span>" + btn.name + "</span></div>";
if (btn.bclass) $('span', btnDiv).addClass(btn.bclass).css({
paddingLeft: 20
});
btnDiv.onpress = btn.onpress;
btnDiv.name = btn.name;
if (btn.onpress) {
$(btnDiv).click(function () {
this.onpress(this.name, g.gDiv);
});
}
$(tDiv2).append(btnDiv);
if ($.browser.msie && $.browser.version < 7.0) {
$(btnDiv).hover(function () {
$(this).addClass('fbOver');
}, function () {
$(this).removeClass('fbOver');
});
}
} else {
$(tDiv2).append("<div class='btnseparator'></div>");
}
}
$(g.tDiv).append(tDiv2);
$(g.tDiv).append("<div style='clear:both'></div>");
$(g.gDiv).prepend(g.tDiv);
}
g.hDiv.className = 'hDiv';
$(t).before(g.hDiv);
g.hTable.cellPadding = 0;
g.hTable.cellSpacing = 0;
$(g.hDiv).append('<div class="hDivBox"></div>');
$('div', g.hDiv).append(g.hTable);
var thead = $("thead:first", t).get(0);
if (thead) $(g.hTable).append(thead);
thead = null;
if (!p.colmodel) var ci = 0;
$('thead tr:first th', g.hDiv).each(function () {
var thdiv = document.createElement('div');
if ($(this).attr('abbr')) {
$(this).click(function (e) {
if (!$(this).hasClass('thOver')) return false;
var obj = (e.target || e.srcElement);
if (obj.href || obj.type) return true;
g.changeSort(this);
});
if ($(this).attr('abbr') == p.sortname) {
this.className = 'sorted';
thdiv.className = 's' + p.sortorder;
}
}
if (this.hidden) {
$(this).hide();
}
if (!p.colmodel) {
$(this).attr('axis', 'col' + ci++);
}
$(thdiv).css({
textAlign: this.align,
width: this.width + 'px'
});
thdiv.innerHTML = this.innerHTML;
$(this).empty().append(thdiv).removeAttr('width').mousedown(function (e) {
g.dragStart('colMove', e, this);
}).hover(function () {
if (!g.colresize && !$(this).hasClass('thMove') && !g.colCopy) {
$(this).addClass('thOver');
}
if ($(this).attr('abbr') != p.sortname && !g.colCopy && !g.colresize && $(this).attr('abbr')) {
$('div', this).addClass('s' + p.sortorder);
} else if ($(this).attr('abbr') == p.sortname && !g.colCopy && !g.colresize && $(this).attr('abbr')) {
var no = (p.sortorder == 'asc') ? 'desc' : 'asc';
$('div', this).removeClass('s' + p.sortorder).addClass('s' + no);
}
if (g.colCopy) {
var n = $('th', g.hDiv).index(this);
if (n == g.dcoln) {
return false;
}
if (n < g.dcoln) {
$(this).append(g.cdropleft);
} else {
$(this).append(g.cdropright);
}
g.dcolt = n;
} else if (!g.colresize) {
var nv = $('th:visible', g.hDiv).index(this);
var onl = parseInt($('div:eq(' + nv + ')', g.cDrag).css('left'));
var nw = jQuery(g.nBtn).outerWidth();
var nl = onl - nw + Math.floor(p.cgwidth / 2);
$(g.nDiv).hide();
$(g.nBtn).hide();
$(g.nBtn).css({
'left': nl,
top: g.hDiv.offsetTop
}).show();
var ndw = parseInt($(g.nDiv).width());
$(g.nDiv).css({
top: g.bDiv.offsetTop
});
if ((nl + ndw) > $(g.gDiv).width()) {
$(g.nDiv).css('left', onl - ndw + 1);
} else {
$(g.nDiv).css('left', nl);
}
if ($(this).hasClass('sorted')) {
$(g.nBtn).addClass('srtd');
} else {
$(g.nBtn).removeClass('srtd');
}
}
}, function () {
$(this).removeClass('thOver');
if ($(this).attr('abbr') != p.sortname) {
$('div', this).removeClass('s' + p.sortorder);
} else if ($(this).attr('abbr') == p.sortname) {
var no = (p.sortorder == 'asc') ? 'desc' : 'asc';
$('div', this).addClass('s' + p.sortorder).removeClass('s' + no);
}
if (g.colCopy) {
$(g.cdropleft).remove();
$(g.cdropright).remove();
g.dcolt = null;
}
}); //wrap content
});
//set bDiv
g.bDiv.className = 'bDiv';
$(t).before(g.bDiv);
$(g.bDiv).css({
height: (p.height == 'auto') ? 'auto' : p.height + "px"
}).scroll(function (e) {
g.scroll()
}).append(t);
if (p.height == 'auto') {
$('table', g.bDiv).addClass('autoht');
}
//add td & row properties
g.addCellProp();
g.addRowProp();
//set cDrag
var cdcol = $('thead tr:first th:first', g.hDiv).get(0);
if (cdcol != null) {
g.cDrag.className = 'cDrag';
g.cdpad = 0;
g.cdpad += (isNaN(parseInt($('div', cdcol).css('borderLeftWidth'))) ? 0 : parseInt($('div', cdcol).css('borderLeftWidth')));
g.cdpad += (isNaN(parseInt($('div', cdcol).css('borderRightWidth'))) ? 0 : parseInt($('div', cdcol).css('borderRightWidth')));
g.cdpad += (isNaN(parseInt($('div', cdcol).css('paddingLeft'))) ? 0 : parseInt($('div', cdcol).css('paddingLeft')));
g.cdpad += (isNaN(parseInt($('div', cdcol).css('paddingRight'))) ? 0 : parseInt($('div', cdcol).css('paddingRight')));
g.cdpad += (isNaN(parseInt($(cdcol).css('borderLeftWidth'))) ? 0 : parseInt($(cdcol).css('borderLeftWidth')));
g.cdpad += (isNaN(parseInt($(cdcol).css('borderRightWidth'))) ? 0 : parseInt($(cdcol).css('borderRightWidth')));
g.cdpad += (isNaN(parseInt($(cdcol).css('paddingLeft'))) ? 0 : parseInt($(cdcol).css('paddingLeft')));
g.cdpad += (isNaN(parseInt($(cdcol).css('paddingRight'))) ? 0 : parseInt($(cdcol).css('paddingRight')));
$(g.bDiv).before(g.cDrag);
var cdheight = $(g.bDiv).height();
var hdheight = $(g.hDiv).height();
$(g.cDrag).css({
top: -hdheight + 'px'
});
$('thead tr:first th', g.hDiv).each(function () {
var cgDiv = document.createElement('div');
$(g.cDrag).append(cgDiv);
if (!p.cgwidth) {
p.cgwidth = $(cgDiv).width();
}
$(cgDiv).css({
height: cdheight + hdheight
}).mousedown(function (e) {
g.dragStart('colresize', e, this);
});
if ($.browser.msie && $.browser.version < 7.0) {
g.fixHeight($(g.gDiv).height());
$(cgDiv).hover(function () {
g.fixHeight();
$(this).addClass('dragging')
}, function () {
if (!g.colresize) $(this).removeClass('dragging')
});
}
});
}
//add strip
if (p.striped) {
$('tbody tr:odd', g.bDiv).addClass('erow');
}
if (p.resizable && p.height != 'auto') {
g.vDiv.className = 'vGrip';
$(g.vDiv).mousedown(function (e) {
g.dragStart('vresize', e)
}).html('<span></span>');
$(g.bDiv).after(g.vDiv);
}
if (p.resizable && p.width != 'auto' && !p.nohresize) {
g.rDiv.className = 'hGrip';
$(g.rDiv).mousedown(function (e) {
g.dragStart('vresize', e, true);
}).html('<span></span>').css('height', $(g.gDiv).height());
if ($.browser.msie && $.browser.version < 7.0) {
$(g.rDiv).hover(function () {
$(this).addClass('hgOver');
}, function () {
$(this).removeClass('hgOver');
});
}
$(g.gDiv).append(g.rDiv);
}
// add pager
if (p.usepager) {
g.pDiv.className = 'pDiv';
g.pDiv.innerHTML = '<div class="pDiv2"></div>';
$(g.bDiv).after(g.pDiv);
var html = ' <div class="pGroup"> <div class="pFirst pButton"><span></span></div><div class="pPrev pButton"><span></span></div> </div> <div class="btnseparator"></div> <div class="pGroup"><span class="pcontrol">' + p.pagetext + ' <input type="text" size="4" value="1" /> ' + p.outof + ' <span> 1 </span></span></div> <div class="btnseparator"></div> <div class="pGroup"> <div class="pNext pButton"><span></span></div><div class="pLast pButton"><span></span></div> </div> <div class="btnseparator"></div> <div class="pGroup"> <div class="pReload pButton"><span></span></div> </div> <div class="btnseparator"></div> <div class="pGroup"><span class="pPageStat"></span></div>';
$('div', g.pDiv).html(html);
$('.pReload', g.pDiv).click(function () {
g.populate()
});
$('.pFirst', g.pDiv).click(function () {
g.changePage('first')
});
$('.pPrev', g.pDiv).click(function () {
g.changePage('prev')
});
$('.pNext', g.pDiv).click(function () {
g.changePage('next')
});
$('.pLast', g.pDiv).click(function () {
g.changePage('last')
});
$('.pcontrol input', g.pDiv).keydown(function (e) {
if (e.keyCode == 13) g.changePage('input')
});
if ($.browser.msie && $.browser.version < 7) $('.pButton', g.pDiv).hover(function () {
$(this).addClass('pBtnOver');
}, function () {
$(this).removeClass('pBtnOver');
});
if (p.useRp) {
var opt = '',
sel = '';
for (var nx = 0; nx < p.rpOptions.length; nx++) {
if (p.rp == p.rpOptions[nx]) sel = 'selected="selected"';
else sel = '';
opt += "<option value='" + p.rpOptions[nx] + "' " + sel + " >" + p.rpOptions[nx] + "  </option>";
}
$('.pDiv2', g.pDiv).prepend("<div class='pGroup'><select name='rp'>" + opt + "</select></div> <div class='btnseparator'></div>");
$('select', g.pDiv).change(function () {
if (p.onRpChange) {
p.onRpChange(+this.value);
} else {
p.newp = 1;
p.rp = +this.value;
g.populate();
}
});
}
//add search button
if (p.searchitems) {
$('.pDiv2', g.pDiv).prepend("<div class='pGroup'> <div class='pSearch pButton'><span></span></div> </div>  <div class='btnseparator'></div>");
$('.pSearch', g.pDiv).click(function () {
$(g.sDiv).slideToggle('fast', function () {
$('.sDiv:visible input:first', g.gDiv).trigger('focus');
});
});
//add search box
g.sDiv.className = 'sDiv';
var sitems = p.searchitems;
var sopt = '', sel = '';
for (var s = 0; s < sitems.length; s++) {
if (p.qtype == '' && sitems[s].isdefault == true) {
p.qtype = sitems[s].name;
sel = 'selected="selected"';
} else {
sel = '';
}
sopt += "<option value='" + sitems[s].name + "' " + sel + " >" + sitems[s].display + "  </option>";
}
if (p.qtype == '') {
p.qtype = sitems[0].name;
}
$(g.sDiv).append("<div class='sDiv2'>" + p.findtext +
" <input type='text' value='" + p.query +"' size='30' name='q' class='qsbox' /> "+
" <select name='qtype'>" + sopt + "</select></div>");
//Split into separate selectors because of bug in jQuery 1.3.2
$('input[name=q]', g.sDiv).keydown(function (e) {
if (e.keyCode == 13) {
g.doSearch();
}
});
$('select[name=qtype]', g.sDiv).keydown(function (e) {
if (e.keyCode == 13) {
g.doSearch();
}
});
$('input[value=Clear]', g.sDiv).click(function () {
$('input[name=q]', g.sDiv).val('');
p.query = '';
g.doSearch();
});
$(g.bDiv).after(g.sDiv);
}
}
$(g.pDiv, g.sDiv).append("<div style='clear:both'></div>");
// add title
if (p.title) {
g.mDiv.className = 'mDiv';
g.mDiv.innerHTML = '<div class="ftitle">' + p.title + '</div>';
$(g.gDiv).prepend(g.mDiv);
if (p.showTableToggleBtn) {
$(g.mDiv).append('<div class="ptogtitle" title="Minimize/Maximize Table"><span></span></div>');
$('div.ptogtitle', g.mDiv).click(function () {
$(g.gDiv).toggleClass('hideBody');
$(this).toggleClass('vsble');
});
}
}
//setup cdrops
g.cdropleft = document.createElement('span');
g.cdropleft.className = 'cdropleft';
g.cdropright = document.createElement('span');
g.cdropright.className = 'cdropright';
//add block
g.block.className = 'gBlock';
var gh = $(g.bDiv).height();
var gtop = g.bDiv.offsetTop;
$(g.block).css({
width: g.bDiv.style.width,
height: gh,
background: 'white',
position: 'relative',
marginBottom: (gh * -1),
zIndex: 1,
top: gtop,
left: '0px'
});
$(g.block).fadeTo(0, p.blockOpacity);
// add column control
if ($('th', g.hDiv).length) {
g.nDiv.className = 'nDiv';
g.nDiv.innerHTML = "<table cellpadding='0' cellspacing='0'><tbody></tbody></table>";
$(g.nDiv).css({
marginBottom: (gh * -1),
display: 'none',
top: gtop
}).noSelect();
var cn = 0;
$('th div', g.hDiv).each(function () {
var kcol = $("th[axis='col" + cn + "']", g.hDiv)[0];
var chk = 'checked="checked"';
if (kcol.style.display == 'none') {
chk = '';
}
$('tbody', g.nDiv).append('<tr><td class="ndcol1"><input type="checkbox" ' + chk + ' class="togCol" value="' + cn + '" /></td><td class="ndcol2">' + this.innerHTML + '</td></tr>');
cn++;
});
if ($.browser.msie && $.browser.version < 7.0) $('tr', g.nDiv).hover(function () {
$(this).addClass('ndcolover');
}, function () {
$(this).removeClass('ndcolover');
});
$('td.ndcol2', g.nDiv).click(function () {
if ($('input:checked', g.nDiv).length <= p.minColToggle && $(this).prev().find('input')[0].checked) return false;
return g.toggleCol($(this).prev().find('input').val());
});
$('input.togCol', g.nDiv).click(function () {
if ($('input:checked', g.nDiv).length < p.minColToggle && this.checked == false) return false;
$(this).parent().next().trigger('click');
});
$(g.gDiv).prepend(g.nDiv);
$(g.nBtn).addClass('nBtn')
.html('<div></div>')
.attr('title', 'Hide/Show Columns')
.click(function () {
$(g.nDiv).toggle();
return true;
}
);
if (p.showToggleBtn) {
$(g.gDiv).prepend(g.nBtn);
}
}
// add date edit layer
$(g.iDiv).addClass('iDiv').css({
display: 'none'
});
$(g.bDiv).append(g.iDiv);
// add flexigrid events
$(g.bDiv).hover(function () {
$(g.nDiv).hide();
$(g.nBtn).hide();
}, function () {
if (g.multisel) {
g.multisel = false;
}
});
$(g.gDiv).hover(function () {}, function () {
$(g.nDiv).hide();
$(g.nBtn).hide();
});
//add document events
$(document).mousemove(function (e) {
g.dragMove(e)
}).mouseup(function (e) {
g.dragEnd()
}).hover(function () {}, function () {
g.dragEnd()
});
//browser adjustments
if ($.browser.msie && $.browser.version < 7.0) {
$('.hDiv,.bDiv,.mDiv,.pDiv,.vGrip,.tDiv, .sDiv', g.gDiv).css({
width: '100%'
});
$(g.gDiv).addClass('ie6');
if (p.width != 'auto') {
$(g.gDiv).addClass('ie6fullwidthbug');
}
}
g.rePosDrag();
g.fixHeight();
//make grid functions accessible
t.p = p;
t.grid = g;
// load data
if (p.url && p.autoload) {
g.populate();
}
return t;
};
var docloaded = false;
$(document).ready(function () {
docloaded = true
});
$.fn.flexigrid = function (p) {
return this.each(function () {
if (!docloaded) {
$(this).hide();
var t = this;
$(document).ready(function () {
$.addFlex(t, p);
});
} else {
$.addFlex(this, p);
}
});
}; //end flexigrid
$.fn.flexReload = function (p) { // function to reload grid
return this.each(function () {
if (this.grid && this.p.url) this.grid.populate();
});
}; //end flexReload
$.fn.flexOptions = function (p) { //function to update general options
return this.each(function () {
if (this.grid) $.extend(this.p, p);
});
}; //end flexOptions
$.fn.flexToggleCol = function (cid, visible) { // function to reload grid
return this.each(function () {
if (this.grid) this.grid.toggleCol(cid, visible);
});
}; //end flexToggleCol
$.fn.flexAddData = function (data) { // function to add data to grid
return this.each(function () {
if (this.grid) this.grid.addData(data);
});
};
$.fn.flexGetRows = function () { // function to add data to grid jej
return this[0].grid.getRows();
};
$.fn.addRows = function (rowList) { // function to add data to grid jej
return this[0].grid.addRows(rowList);
};
$.fn.getSelectRowsToGrid = function () { // function to add data to grid jej
return this[0].grid.getSelectRowsToGrid();
};
$.fn.getGridAllRows = function () { // function to add data to grid jej
return this[0].grid.getGridAllRows();
};
$.fn.getGridAllRowsForObj = function () { // function to add data to grid jej
return this[0].grid.getGridAllRowsForObj();
};
$.fn.clearSelect = function () { // function to add data to grid jej
return this[0].grid.clearSelect();
};
$.fn.deleteSelectRows = function () { // function to add data to grid jej
return this[0].grid.deleteSelectRows();
};
$.fn.queryData = function (params) { // function to add data to grid jej
return this[0].grid.queryData(params);
};
$.fn.noSelect = function (p) { //no select plugin by me :-)
var prevent = (p == null) ? true : p;
if (prevent) {
return this.each(function () {
if ($.browser.msie || $.browser.safari) $(this).bind('selectstart', function () {
return false;
});
else if ($.browser.mozilla) {
$(this).css('MozUserSelect', 'none');
$('body').trigger('focus');
} else if ($.browser.opera) $(this).bind('mousedown', function () {
return false;
});
else $(this).attr('unselectable', 'on');
});
} else {
return this.each(function () {
if ($.browser.msie || $.browser.safari) $(this).unbind('selectstart');
else if ($.browser.mozilla) $(this).css('MozUserSelect', 'inherit');
else if ($.browser.opera) $(this).unbind('mousedown');
else $(this).removeAttr('unselectable', 'on');
});
}
}; //end noSelect
})(jQuery);

调用的主要例子，可以忽略页面中的css等，主要参照如何使用即可

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<link rel="stylesheet" type="text/css" href="js/widget/flexigrid-1.1/css/flexigrid.css" />
<link rel="stylesheet" type="text/css" href="css/zsclssel.css" />
<script src="js/jquery/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript" src="<%=config.getServletContext().getContextPath()%>/dwr/engine.js"></script>
<script type="text/javascript" src="<%=config.getServletContext().getContextPath()%>/dwr/util.js"></script>
<script type="text/javascript" src="<%=config.getServletContext().getContextPath()%>/dwr/interface/ZhfxGridAction.js"></script>
<script type="text/javascript" src="js/widget/flexigrid-1.1/js/flexigrid.js"></script>
<link rel="stylesheet" type="text/css" href="js/widget/idealforms/jquery.idealforms.min.css"/>
<script type="text/javascript" src="js/widget/idealforms/jquery.idealforms.js"></script>
<script type="text/javascript">
window.returnValue = null;
var $jq = jQuery.noConflict();
var selforcls = 'total';
var fretype = 1;
$jq(document).ready(function(){
var options = {
onFail: function() {
},
onSuccess: function(e) { }
}
var $myform = $jq('#my-form').idealforms(options);
$forminputs = $myform.data('idealforms');

$jq("#datagriddivview").flexigrid({
colModel : [
{display: '指数名称', name : 'zbName', width : 280, sortable : false, align: 'center'},
{display: '指数频率', name : 'preType', width : 80, sortable : false, align: 'left'}
],
usepager: true,
title: '可选择指数',
useRp: true,
height:450,
rp: 20,
rpOptions: [20,50,100],
dwrAction:getData, //js方法，里面调用dwr，也可以封装到flexigrid中，但为了方便，没有直接封装死
method:'dwr', //该参数表明使用dwr方法 add by danielinbiti
url:true,
resizable:false,
pagestat: '',
pagetext: 'Page',
outof: 'of',
procmsg: '正在查询数据 ...',
nomsg: '没有数据',
dataType:'json'
});
function strToJson(str){
var json = eval('(' + str + ')');
return json;
}
function getData(param){
var pageNum = 0;
var perPageNum = 0;
var queryMap = null;
for(var i=0;i<param.length;i++){
if(param[i].name=='page'){
pageNum = param[i].value;
}else if(param[i].name=='rp'){
perPageNum = param[i].value;
}else if(param[i].name=='queryCond'){
if(param[i].value instanceof Object){
queryMap = param[i].value;
}
}
}
ZhfxGridAction.getSubClassInfo(selforcls,fretype,queryMap,perPageNum,pageNum,2,function(data){
var jsondata = strToJson(data);
$jq("#datagriddivview").flexAddData(jsondata);
});
}
$jq("#datagriddivresult").flexigrid({
colModel : [
{display: '指数名称', name : 'zbName', width : 280, sortable : false, align: 'center'},
{display: '指数频率', name : 'preType', width : 80, sortable : false, align: 'left'}
],
usepager: false,
title: '已选择的指数',
useRp: true,
rp: 20,
height:450,
rpOptions: [20,50,100],
url:true,
resizable:false,
pagestat: '',
pagetext: 'Page',
outof: 'of',
procmsg: '正在查询数据 ...',
nomsg: '没有数据',
dataType:'json'
});
$jq("#datagriddivresult").flexAddData({});
});
function moveRightRow(){
var rowList = $jq("#datagriddivview").getSelectRowsToGrid();
var selList = $jq("#datagriddivresult").getGridAllRows();
var flag = true;
var resultRows = new Array();

for(var i=0;i<rowList.length;i++){
var row = rowList[i];
flag = true;
for(var j=0;j<selList.length;j++){
var selRow = selList[j];
if(selRow[0]==row[0]){
flag = false;
break;
}
}
if(flag){
resultRows[resultRows.length] = row;
}
}
$jq("#datagriddivresult").addRows(resultRows);
$jq("#datagriddivview").clearSelect();
}
function delRows(){
$jq("#datagriddivresult").deleteSelectRows();
}
function saveData(){
var selList = $jq("#datagriddivresult").getGridAllRows();
var rtnArr = new Array();
if(selList!=null){
for(var i=0;i<selList.length;i++){
rtnArr[rtnArr.length] = selList[i][0];
}
}
window.returnValue = rtnArr;
window.close();
}
function queryData(){
var name = $jq("#zsname").val();
var isLink = $jq("#zslinkstatusselect").val();
var params={
zbName:name,
isLink:isLink
};
$jq("#datagriddivview").queryData(params);
}
</script>
</head>
<body>
<div id="div_head"></div>
<div id="div_body">
<div>
<form id="my-form">
<div>
<div class="onrowcss">
<div><label>
指数名称:</label><input id="zsname" name="zsname" type="text"/></div>
</div>
<div class="onrowcss">
<div>
<label>   是否已经关联:</label>
<select id="zslinkstatusselect" name="zslinkstatusselect">
<option value="0,1">全部</option>
<option value="0">未关联</option>
<option value="1">已关联</option>
</select>
</div>
</div>
<div class="divbtncss onrowcss">
<div>
<button id="btnquery" class="divquerycss" type="button" onclick="queryData()">查询</button>
</div>
</div>
</div>
</form>
</div>
<div>
<div class="divgridclass onrowcss">
<div id="datagriddivview"></div>
</div>
<div id="divselbutton" class="divselbuttoncss onrowcss" align="center">
<input type="button" id="btnSelDown" class="btnclass divseldown" value="" onclick="moveRightRow()"/>
</div>
<div class="onrowcss">
<div class="divgridclass gridwidth">
<div id="datagriddivresult"></div>
</div>
<div id="divresultbuttons" class="divresultbuttonscss" align="center">
<input type="button" id="btnDel" class="btnclass" value="删除" onclick="delRows()"/>
<input type="button" id="btnDel" class="btnclass" value="确定" onclick="saveData()"/>
</div>
</div>
</div>
</div>
<div id="div_foot">
</div>
</body>
</html>

js页面下载链接http://download.csdn.net/detail/danielinbiti/5573615