jqGrid添加行报错，错误信息： jQuery("#list4").jqGrid("addRowData",i+1,mydata[i]);

我随便试了一下，是可以的。。是不是你的jquery版本太旧了。

jQuery("#list4").jqGrid({

    datatype: "local",

    height: 'auto',

    width:'100%',

    colNames:['id','invdate','name','note','amount','tax','total'],

    colModel:[

        {name:'id',index:'id', sortable:false},

        {name:'invdate',index:'invdate', width:60},

        {name:'name',index:'name', width:130},

        {name:'note',index:'note', width:130},

        {name:'amount',index:'amount', width:92},

        {name:'tax',index:'tax', width:92},

        {name:'total',index:'total', width:130}],

    sortname: 'id', viewrecords: true, sortorder: "asc",

    multiselect: true,

    onCellSelect: function(rowid,iCol,cellcontent,e) {

    }

})

        

var mydata = [

    {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},

    {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}]

for(var i=0 i <= mydata.length i++){

    jQuery("#list4").jqGrid('addRowData',i+1,mydata[i])

}

<script>

$(document).ready(function()

{

initPlsfList()

})

//初始化grid列表

function initPlsfList(){

//缓存表列数组,key 为页面元素的name ，value 对应数据库中的字段

var cellArray = new Array()

cellArray["zoneID"] ="ZONE_ID"

cellArray["factorPG"] ="FACTOR_PG"

cellArray["factorQG"] ="FACTOR_QG"

cellArray["factorPL"] ="FACTOR_PL"

cellArray["factorQL"] ="FACTOR_QL"

cellArray["valid"] ="VALID"

var caseID = '${caseID}'

$("#plsfList").jqGrid({

url:"<c:url value='/lfc/powerlsfactor/queryData?caseID="+caseID+"' />",

datatype: "json",

mtype:"POST",

height: "auto",

width: "auto",

colNames:[

'id',

"<fmt:message key='case.valid'/>",

"<fmt:message key='zone'/>",

"<fmt:message key='pasf'/>",

"<fmt:message key='pisf'/>",

"<fmt:message key='lasf'/>",

"<fmt:message key='lisf'/>",

'modeID'

],

colModel:[

{name:'id',index:'id', width:100,hidden:true},

{name:'valid',index:'valid', width:100,editable:true,

formatter:formatValid,

editable:true,edittype:'checkbox',

editoptions:{value:'1:0',defaultValue:'1'}

},

{name:'zoneName',index:'zoneName', width:150,editable:true},

{name:'factorPG',index:'factorPG', width:100,editable:true},

{name:'factorQG',index:'factorQG', width:100,editable:true},

{name:'factorPL',index:'factorPL', width:100,editable:true},

{name:'factorQL',index:'factorQL', width:100,editable:true},

{name:'caseID',index:'caseID', width:100,hidden:true},

],

rowNum:10,

rowList:[10,20,30],

pager: '',

cellEdit:true,

viewrecords: true,

jsonReader: { repeatitems : false, id: "id" },

viewsortcols:[false,'horizontal',false],

sortable:false,

sortorder:"asc",

sortname:"id",

multiselect: true,

cellurl:"<c:url value='/lfc/powerlsfactor/save'/>",

cellsubmit: 'remote',

gridComplete: function() {

var $selecAll = $("#cb_plsfList")

var cb_title = "<fmt:message key='select.all' bundle='${commonResources}'/>"

if($selecAll){

$selecAll.attr("title",cb_title)

}

//设置全选checkbox title

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

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

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

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

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

}

},

onSortCol:function(index,iCol,sortorder){

return false

},

ondblClickRow: function (rowid,iRow,iCol,e) {

/*var $plsfList = $("#plsfList")

if (isRowNeedSave($plsfList)){

showMessage("请先保存")

}else{

$("#operate").val("update")

newrowid = rowid

$plsfList.setGridParam({cellEdit:false})

$plsfList.jqGrid('editRow', rowid, true)

//确定按钮可用

$("#confirm_btn").attr("disabled",false)

}*/

},

beforeSubmitCell:function(rowid, cellname, value, iRow, iCol){

//列提交前的拦截方法

var $plsfList = $("#plsfList")

var $editUrl = '<c:url value='/lfc/powerlsfactor/save'/>'

//设置列提交的url。updateCellName：要编辑的列名 ；updateCellValue ：是编辑的值

$editUrl = addParamToUrl($editUrl,'updateCellName',iCol == 3 ? cellArray['zoneID'] :cellArray[cellname])

$editUrl = addParamToUrl($editUrl,'updateCellValue',iCol == 3 ? $("#zone_id").val():value)

//给jqgrid 从新设置cellurl 值

$plsfList.setGridParam({cellurl:$editUrl})

return false

},

afterEditCell:function(rowid, cellname, value, iRow, iCol){

//动态修改lie时，当列 变为可修改状态时，给列add一个button，且列中元素不可编辑，点击button d出一个模态窗口，可以选择元素 ，赋值给grid当前编辑列中单行表单域中.

$("#"+rowid+" input[type='checkbox']").attr("checked",value == "<fmt:message key='case.valid'/>" ? true:false)

if(iCol==3){

$("#irowNum").val(rowid)

var $data = $("#"+rowid +">td")//获取这个行里所有的td元素，即：获取所有子元素

$zoneInput = $data.find("input").eq("1")

$zoneInput.css("width","100px")

$zoneInput.attr("disabled",true)

$zoneInput.after("<input type='button' value='选择' onclick='fnCallDialogForEidt()' />")

}

}

})

//grid添加新的一行

var newrowid

function addRow()

{

$("#operate").val("")

var selectedId = $("#plsfList").jqGrid("getGridParam", "selrow")

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

//获得当前最大行号（数据编号）

var rowid = Math.max.apply(Math,ids)

//获得新添加行的行号（数据编号）

newrowid = rowid+1

var dataRow = {

id: "",

valid:"",

zoneID:'',

factorPG:'',

factorQG:'',

factorPL:'',

factorQL:'',

caseID:''

}

//将新添加的行插入到第一列

$("#plsfList").jqGrid("addRowData", newrowid, dataRow, "first")

//设置grid单元格不可编辑

$("#plsfList").setGridParam({cellEdit:false})

//设置grid单元格可编辑

$('#plsfList').jqGrid('editRow', newrowid, false)

//确定按钮可用

$("#confirm_btn").attr("disabled",false)

//给添加的列加选择按钮

var $zoneInput = $("#"+newrowid+"_zoneName")

$zoneInput.attr("disabled",true).css("width",100)

$zoneInput.after("<input type='button' value='选择' onclick='fnCallDialogForEidt()' />")

}

function insertPlsf(){

var $plsfList = $("#plsfList")

var $operate = $("#operate").val()

//设置grid单元格可编辑

$plsfList.setGridParam({cellEdit:true})

//设置grid行不可编辑

//$plsfList.jqGrid('editRow', newrowid, false)

//拼接请求的url

var url = '<%=basePath%>'+"/lfc/powerlsfactor/save"

var $params = $plsfList.find("input[id^="+newrowid+"]")

var $check_val = $params.eq(0).is(':checked') ? 1:0

url = addParamToUrl(url,'valid',$check_val)

url = addParamToUrl(url,'zoneID',$("#zone_id").val())

url = addParamToUrl(url,'factorPG',$params.eq(2).val())

url = addParamToUrl(url,'factorQG',$params.eq(3).val())

url = addParamToUrl(url,'factorPL',$params.eq(4).val())

url = addParamToUrl(url,'factorQL',$params.eq(5).val())

var $caseID = $("#caseID").val()

url = addParamToUrl(url,'caseID',$caseID)

$.ajax({url:url,type:"post",timeout:5000,

success:function(data){

showMessage(data)

reloadGrid()

}

})

//将新添加行号 初始为空

newrowid = ''

//确定按钮不可用

$("#confirm_btn").attr("disabled",true)

}

//格式zone列输出内容

function formatZone(cellvalue, options, rowObject){

if(cellvalue == 0){

return 0

}else if(cellvalue == 1){

return 1

}else if(cellvalue == 2){

return 2

}else{

return 3

}

}

function isRowNeedSave($jqgrid){

var $editTr = $jqgrid.find("tr[editable=1]")

var flag = false

if ( $editTr &&$editTr.length >0){

flag = true

}

return flag

}

function cancel(){

reloadGrid()

//确定按钮不可用

$("#confirm_btn").attr("disabled",true)

//设置grid单元格可编辑

$("#plsfList").setGridParam({cellEdit:true})

//设置grid单元格可编辑

$('#plsfList').jqGrid('editRow', newrowid, true)

}

function fnCallDialogForEidt(){

//获得当前行号（数据编号）

var returnValue = ""

returnValue = window.showModalDialog("<c:url value='/element/zone/query?caseID="+$("#caseID").val()+"' />",window,"")

if(returnValue==""||returnValue==null)

return

var $plsfList = $("#plsfList")

var $params = $plsfList.find("input[id$='zoneName']")

var names = returnValue.split(",")

$params.eq(0).val(names[1])

$("#zone_id").val(names[0])

}

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

---