1、首先开始新建html文件。
2、然后创建一个三行三列的表格。
3、接下来开始创建js函数。
4、接下来开始进行定义变量获取行。
5、然后就将函数加在按钮上。
6、就可以看到预览效果如图。
7、最后点击第二个按钮删除 第二行。
你问的是如同excel中的“复制-选择性粘贴-转置”的效果吧？若是的话，你的需求就可以通过js方法实现的：
首先定义一个多维数组，将table中的数据添加到这个数组中；
然后，重建（若是行列数亮相等<包括thead中的行>，就不需要创建）一个新的table，将数据加载到table中；
最后隐藏原来的table就可以了
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
}
}
}
