jqgrid怎么用js改表格数据_IT百科

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

}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>jqgridtest</title>

$(function(){

var initdata = [

{no:"1",n:"aaa",s:"1",a:"20",addr:"AAAAAAAAAAAAAAAAAAAAAAAAAAAAA",email:"1111.222@aaa.com"},

{no:"2",n:"bbb",s:"2",a:"21",addr:"11111111111111111111111111111",email:"2222.222@aaa.com"},

{no:"3",n:"ccc",s:"1",a:"22",addr:"22222222222222222222222222222",email:"33333.222@aaa.com"},

{no:"4",n:"ddd",s:"2",a:"23",addr:"aaaaaaaaaaaaaaaaaaaaaaaaaaaaa",email:"44444.222@aaa.com"},

{no:"5",n:"eee",s:"2",a:"24",addr:"ccccccccccccccccccccccccccccc",email:"55555.222@aaa.com"}

]

$("#list19").jqGrid({

data:initdata,

datatype: "local",

colNames:['No','Name',"sex","age","addr","email"],

colModel:[

{name:'no',index:'no', width:50,sortable:false},

{name:'n',index:'n', width:80,sortable:false},

{name:'s',index:'s', width:50,sortable:false,hidden:true},

{name:'a',index:'a', width:30,sortable:false,hidden:true},

{name:'addr',index:'addr', width:300,sortable:false,hidden:true},

{name:'email',index:'email', width:100,sortable:false,hidden:true}

rowNum:30,

rowList:[10,20,30],

gridview:true,

autowidth:true,

pager: $('#pager19'),

sortname: 'No',

sortorder: "desc",

caption: "demo"

})

$(window).resize(function(){

jqgridresize()

})

var jqgridresize = function(){

var bodyw = $(document.body).width()

if(bodyw>600){

$("#list19").jqGrid('showCol',["s","a","addr","email"])

}

else{

$("#list19").jqGrid('hideCol',["s","a","addr","email"])

}

</script>

</head>

在resize浏览器的时候判断宽度，控制列的显示隐藏

打开APP

Tianya_追心

关注

jgGrid实现左移、右移、上移、下移转载

2018-06-21 15:52:05

1点赞

Tianya_追心

码龄10年

关注

摘要：

最近在项目需求中通过jqGrid实现表格中的数据：左移、右移、上移、下移和置顶等 *** 作。

下面记录实现的方法。

下面是代码片段：

右移（其实就是向一个grid容器中插入一行数据）：

//这个方法是获取ztree节点内容，插入到grid表中

function BindBtnRightMethod() {

//获取ztree对象

var zTreeObj = $.fn.zTree.getZTreeObj("ztreeId")

//获取光标选中的tree节点

var selectedNodes = zTreeObj.getSelectedNodes()

if (selectedNodes.length == 0) {

$.modalAlert(" *** 作失败！未选中节点。")

return} else {

//新增一行

var data = { KSID:"10", FLKSID:"101", KSMC: "消化科" }

addRowDataByGridElementId("jqGridId", data)}}

//摘要：//内容：向grid表中添加一行记录

function addRowDataByGridElementId(id, data) {

//获取当前grid中的表ID集合

var jqGrid = $('#' + id)var IDs = jqGrid.getDataIDs()

//定义标量，记录IDs中的rowid的最大值

var maxId = 0if (IDs.length >0) {

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

var tmpId = jqGrid.getInd(IDs[i])

if (maxId <tmpId) {

maxId = tmpId

} } }

//这里是在给新增的rowid自定义一个有序值

var rowid= maxId + 1

//执行新增 *** 作

jqGrid.addRowData(rowid, data, rowid)

}

左移（其实是从grid表中删除一行）：

//摘要：//内容：按钮左移

function BindBtnLeftMethod() {

//删除选中行

var rowid = $("#jqGridId").jqGrid('getGridParam', 'selrow')

if (rowid == "" || rowid == undefined || rowid == null) {

$.modalAlert("移除行未选中！")

return} else {

var flag = $("#jqGridId").jqGrid("delRowData", rowid)

if (!flag) {

$.modalAlert("移除 *** 作失败！")

}

}}

上移：

//摘要：

//内容：按钮上移

function BindBtnUpMethod() {

var obj = $("#jiGouGridList")

var IDs = obj.getDataIDs()

var rowid = obj.jqGrid('getGridParam', 'selrow')

if (rowid == "" || rowid == null || rowid == undefined) {

$.modalAlert("未选中行！")

return false

}

var rowIndex = getRowIndexByRowId(IDs, rowid)

if (rowIndex == 0) {

$.modalAlert('已经置顶，不能上移!')

} else {

var srcrowid = getRowIdByRowIndex(IDs, rowIndex - 2)

var rowUpId = getRowIdByRowIndex(IDs, rowIndex - 1)

var rowData = obj.jqGrid('getRowData', rowid)

var rowUpData = obj.jqGrid('getRowData', rowUpId)

//删除当前行

obj.delRowData(rowid)

obj.delRowData(rowUpId)

//新插入一行

obj.addRowData(rowid, rowData, "after", srcrowid)

obj.addRowData(rowUpId, rowUpData, "after", rowid)

//默认再选中新增的这个行

obj.setSelection(rowid)

}

//摘要：

//内容：根据rowid，获取索引值

function getRowIndexByRowId(Ids, id) {

var index = 0

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

if (Ids[i] == id) {

index = i

}

return index

}

//摘要：

//内容：根据索引值获取rowid值

function getRowIdByRowIndex(Ids, index) {

var rowid = ""

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

if (i == index) {

rowid = Ids[i]

}

return rowid

}

下移：

//摘要：

//内容：按钮下移

function BindBtnDownMethod() {

var obj = $("#jqGridId")

var IDs = obj.getDataIDs()

var rowid = obj.jqGrid('getGridParam', 'selrow')

if (rowid == "" || rowid == null || rowid == undefined) {

$.modalAlert("未选中行！")

return false

}

var rowIndex = getRowIndexByRowId(IDs, rowid)

if (rowIndex == (IDs.length - 1)) {

$.modalAlert('已经置底，不能下移!')

} else {

var srcrowid = getRowIdByRowIndex(IDs, rowIndex - 1)

var rowDownId = getRowIdByRowIndex(IDs, rowIndex + 1)

var rowData = obj.jqGrid('getRowData', rowid)

var rowDownData = obj.jqGrid('getRowData', rowDownId)

//删除当前行

obj.delRowData(rowid)

obj.delRowData(rowDownId)

//新插入一行

obj.addRowData(rowDownId, rowDownData, "after", srcrowid)

obj.addRowData(rowid, rowData, "after", rowDownId)

//默认再选中新增的这个行

obj.setSelection(rowid)

}

打开CSDN APP，看更多技术内容

ListBox实现上移,下移,左移,右移的简单实例

主要介绍了ListBox实现上移,下移,左移,右移的简单实例。需要的朋友可以过来参考下，希望对大家有所帮助

JS与jQuery实现ListBox上移,下移,左移,右移 *** 作功能示例

主要介绍了JS与jQuery实现ListBox上移,下移,左移,右移 *** 作功能,涉及javascript与jQuery的事件响应、页面元素动态 *** 作等相关实现技巧,需要的朋友可以参考下

易语言汇编实现左移右移模块

易语言汇编实现左移右移模块源码系统结构:asm_rol,asm_ror,asm_rcl,asm_rcr,asm_shl,asm_shr,asm_not, ======程序集1 || ||------_启动子程序 || ||------_临时子程序 || ||------asm_rol || ||------asm_ror || ||-...

易语言源码易语言汇编实现左移右移模块源码.rar

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/bake/11562418.html

jqgrid怎么用js改表格数据

发表评论

评论列表（0条）