jqgrid如何动态设置单元格属性

jqGrid提供了大量的选项设置，开发者可以通过设置选项对应值来控制jqGrid，比如表格的宽度、高度、数据类型以及列名称等等都是通过选项设置来完成的。jqGrid的选项一般是名称：值（name:value）的形式

在jqGrid中设置multiselect: true可以实现全选的 *** 作，但怎么设置被选中的checkbox里面的值呢，做法如下：

jQuery("#listTable").jqGrid({

url: 'queryList.do',

datatype: 'json',

colNames: ['','编号','姓名'],

colModel: [

{

name: 'MY_ID',

index: 'MY_ID',

sortable: false,

width: '0%',

hidden:true

},

{

name: 'MY_NO',

index:'MY_NO',

sortable: false,

align:'center',

width:'10%'

},

{

name: 'NAME',

index:'NAME',

sortable: false,

align:'center',

width:'10%'

}

],

page: 1,

rowNum: 10,

rowList: [10, 20, 30],

pager: '#listPage',

multiselect: true,

sortname: 'MY_NO',

viewrecords: true,

sortorder: "desc",

jsonReader: {

repeatitems: false

},

width: "100%",

height: '100%',

gridComplete: function() {

var rowIds = jQuery("#listTable").jqGrid('getDataIDs')

for(var k=0k<rowIds.lengthk++) {

var curRowData = jQuery("#listTable").jqGrid('getRowData', rowIds[k])

var curChk = $("#"+rowIds[k]+"").find(":checkbox")

curChk.attr('name', 'checkboxname')//给每一个checkbox赋名字

curChk.attr('value', curRowData['MY_ID'])//给checkbox赋值

curChk.attr('title', curRowData['NAME'] )//给checkbox赋予额外的属性值

//curChk.attr('checked', 'true')//设置所有checkbox被选中

}

//下面的代码顺序不能变(这是页面上所有行被真选中[所有行被黄色])

//$("#cb_listTable").attr("checked", true)

//$("#cb_listTable").click()//input框

//$("#jqgh_listTable_cb").click()//div标签

//$("#listTable_cb").click()//th标签

}

})

加载完列表后获取被选中的checkbox的值及其属性值的做法如下：

var checkedVals = new Array()

var checkedTitles = new Array()

$(":checkbox[name=checkboxname][checked]").each(function(){

checkedVals.push($(this).val())

checkedTitles.push($(this).attr("title"))

})

for(var p=0p<checkedVals.lengthp++){

alert(checkedVals[p])

alert(checkedTitles[p])

}

--------------------------------------------------------------------------------------------------

让查询列表中按指定条件被默认选中或灰掉checkbox的做法如下：

jQuery("#listTable").jqGrid({

url: 'queryList.do',

datatype: 'json',

colNames: ['','编号','姓名'],

colModel: [

{

name: 'MY_ID',

index: 'MY_ID',

sortable: false,

width: '0%',

hidden:true

},

{

name: 'MY_NO',

index:'MY_NO',

sortable: false,

align:'center',

width:'10%'

},

{

name: 'NAME',

index:'NAME',

sortable: false,

align:'center',

width:'10%'

}

],

page: 1,

rowNum: 10,

rowList: [10, 20, 30],

pager: '#listPage',

multiselect: true,

multiboxonly: true,

sortname: 'MY_NO',

viewrecords: true,

sortorder: "desc",

jsonReader: {

repeatitems: false

},

width: "100%",

height: '100%',

gridComplete: function() {

var rowIds = jQuery("#listTable").jqGrid('getDataIDs')

for(var k=0k<rowIds.lengthk++) {

var curRowData = jQuery("#listTable").jqGrid('getRowData', rowIds[k])

if(curRowData.MY_NO == '123456'){

$("#listTable").find("input[id='jqg_" + rowIds[k] +

"']").val(curRowData.MY_ID)

if(curRowData.NAME=='shihuan'){

$("#listTable").find("input[id='jqg_" + rowIds[k] +

"']").attr("checked", true)

}

}else{

$("#listTable").find("input[id='jqg_" + rowIds[k] +

"']").val(curRowData.MY_ID)

$("#listTable").find("input[id='jqg_" + rowIds[k] + "']").attr("checked",

true)

$("#listTable").find("input[id='jqg_" + rowIds[k] + "']").attr("disabled",

true)

}

}

}

onSelectAll:function(rowid, status) { //rowid 数组

var ids = jQuery("#listTable").jqGrid('getDataIDs')

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

var cl = ids[i]

var curRowData = jQuery("#listTable").jqGrid('getRowData',cl)

var ckt = $("#listTable").find("input[id='jqg_" + cl + "']").attr("disabled")

if(ckt){

$("#listTable").find("input[id='jqg_" + cl + "']").attr("checked", true)

}

}

},

beforeSelectRow:function(rowid, e){

//alert(rowid)//rowid的值是checkbox的value值

return false

}

})

--------------------------------------------------------------------------------------------------

jqGrid被重新载入的做法如下：

function gridReload() {

jQuery("#listTable").jqGrid('setGridParam', {

//url:'../../../com/shihuan/search.do',

//postData: transferFormElementsToObject('theForm'),

postData: {"message":msval},

page:1

}).trigger("reloadGrid")

}

Copyright © 1999-2020, CSDN.NET, All Rights Reserved

打开APP

Tianya_追心

关注

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

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

---