目前还没有这样的方法
只能先卸载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"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>jqgridtest</title>
<link rel="stylesheet" type="text/css" media="screen" href="/js/jqgrid/themes/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/js/jqgrid/themes/redmond/jquery-ui-1.7.1.custom.css" />
<script src="/js/jqgrid/js/jquery.js" type="text/javascript"></script>
<script src="/js/jqgrid/js/jquery-ui-1.7.1.custom.min.js" type="text/javascript"></script>
<script src="/js/jqgrid/js/i18n/grid.locale-cn.js" type="text/javascript"></script>
<script src="/js/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var initdata = [
{no:"1",n:"aaa",s:"1",a:"20",addr:"AAAAAAAAAAAAAAAAAAAAAAAAAAAAA",email:"[email protected]"},
{no:"2",n:"bbb",s:"2",a:"21",addr:"11111111111111111111111111111",email:"[email protected]"},
{no:"3",n:"ccc",s:"1",a:"22",addr:"22222222222222222222222222222",email:"[email protected]"},
{no:"4",n:"ddd",s:"2",a:"23",addr:"aaaaaaaaaaaaaaaaaaaaaaaaaaaaa",email:"[email protected]"},
{no:"5",n:"eee",s:"2",a:"24",addr:"ccccccccccccccccccccccccccccc",email:"[email protected]"}
]
$("#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浏览器的时候判断宽度，控制列的显示隐藏
Copyright © 1999-2020, CSDN.NET, All Rights Reserved打开APP
Tianya_追心
关注
2018-06-21 15:52:05
1点赞
Tianya_追心
码龄10年
关注
摘要：
最近在项目需求中通过jqGrid实现表格中的数据：左移、右移、上移、下移和置顶 等 *** 作。
下面记录实现的方法。
1
2
3
下面是代码片段：
右移（其实就是向一个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
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）