html tr td表格呈现的数据 列变成行，行变成列可以吗？

JavaScript09

html tr td表格呈现的数据 列变成行，行变成列可以吗？,第1张

你问的是如同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

}

}

}