jqgrid怎么用js改表格数据

1 jqGrid动态增加列，

目前还没有这样的方法

只能先卸载Grid再进行重绘，才能达到改变列的目的。

Java代码

jQuery('#grid1').GridUnload()

用这个方法 卸载jqgrid

然后重新设置吧

Java代码

jQuery('#grid1').jqGrid({

colNames:...,

colModel:...,

...

})

2 用本地 数据 修改表格

这个必须先把数据类型改成local

Java代码

$('#lgrid-1').jqGrid().clearGridData()

$('grid-1').jqGrid('setGridParam',

{ datatype:local,

rowNum:data.length,

data:data

}

).trigger('reloadGrid', [{page:1}])

一旦用本地数据 分页功能就不好用了,因为不会再去查后台了

3 修改多条 同时提交后台

Java代码

var savedRow = null

var savedCol = null

// 修正

$('#lgrid-3').setGridParam({

beforeEditCell : function(rowid, cellname, value, iRow, iCol) {

// 记录修改的表格

savedRow = iRow

savedCol = iCol

}

})

// 向后台发送数据前 保存表格的修改

if (savedRow &&savedCol) {

jQuery('#grid-3').jqGrid('saveCell', savedRow, savedCol)

}

// 取得表格的数据 全部

var data = $('#grid-3').jqGrid().getRowData()

4 隐藏列

Java代码

jQuery('#grid_id').hideCol('somecol').trigger('reloadGrid')

显示用 showCol

5 可以多选的情况下 默认选中

Java代码

$('#list').jqGrid().setSelection(1)

如果已经被选中 则是 反选

6 数据绑定前检查

Java代码

ajaxGridOptions:

{dataFilter:

function(data,dataType){// preprocess the data

if ( $(data).find("code").text() == 'problem' ) { // check for an error in the result

$("#list").jqGrid('GridUnload')

$("#errormsg").text( $(data).find("description").text() )

}else{

return data

}

}

}

比如设置table的id为tab

var

trHTML

=

"<tr><td>...</td></tr>"

$("#tab").append(trHTML)//在table最后面添加一行

$("#tab

tr:eq(2)").after(trHTML)

//

在table的第3行后面添加一行

这样就可以进行动态的添加行了，至于你是通过什么事件来动态添加那就看你自己的意思了，通过button或者div之类的点击事件添加，只要把上面的两行代码放进去就ok，注意，要把var

trHTML那行代码放进添加事件里面，不然不管点击多少下，都只能添加一行

$(function()

{

$(":button").click(function()

{

var

tr

=

"<tr><td>new</td></tr>"

//$("table").append(tr)

$("table

tr:eq(2)").after(tr)

})

})

这是我测试用的代码，你可以运行看看

先定义一个表格，利用ajax首先加载一次数据。

<table id="t2">

<tr>

<td width="10%" height="22" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">序号</span></div></td>

<td width="10%" height="22" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">总交易数</span></div></td>

<td width="10%" height="22" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">成功交易数</span></div></td>

<td width="10%" height="22" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">成功百分比(%)</span></div></td>

<td width="10%" height="22" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">失败交易数</span></div></td>

<td width="10%" height="22" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">失败百分比(%)</span></div></td>

<td width="10%" height="22" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">未知交易数</span></div></td>

<td width="10%" height="22" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">未知百分比(%)</span></div></td>

<td width="20%" height="22" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">统计时间段</span></div></td>

</tr>

</table>

然后在页面定义一个ajax方法定时去后台查询数据就可以。

function loadData(){

$.ajax({

type: "POST",

url: "<%=path %>/two",

dataType: "json",

data:{'startTime':startTime,'endTime':endTime},

success: function(returnedData){//查询成功之后填充表格

var html = ""

var tdHead = "<td height='20'><div align='center'><span class='STYLE1'>"

var tdFoot = "</span></div></td>"

$("#t2 tr:gt(0)").remove()//第一行是table的表格头不需清除。

for(var i=0i<returnedData.lengthi++){

var countInfo = returnedData[i]

var totalCount = countInfo.totalCount

var sucCount = countInfo.sucCount

var failCount = countInfo.failCount

var unknowCount = countInfo.unknowCount

var sucPercent = countInfo.sucPercent

var failPercent = countInfo.failPercent

var unknowPercent = countInfo.unknowPercent

var countTimeZone = countInfo.countTimeZone

html += "<tr>" + tdHead + (i + 1) + tdFoot +

tdHead + totalCount + tdFoot +

tdHead + sucCount + tdFoot +

tdHead + sucPercent + tdFoot +

tdHead + failCount + tdFoot +

tdHead + failPercent + tdFoot +

tdHead + unknowCount + tdFoot +

tdHead + unknowPercent + tdFoot +

tdHead + countTimeZone + tdFoot + "</tr>"

}

$("#t2").append(html)//将新数据填充到table

}

})

}

---