jqgrid实现客户端数组的CRUD

来源：互联网发布：嵌入式软件安装编辑：程序博客网时间：2024/06/14 18:58

1、首先引入必需的CSS、JS文件：

2、在html body元素中添加如下内容：

<body>

</body>

3、自定义JS

$(function(){

$("#del").click(function(){

var su=jQuery("#list1").jqGrid('delRowData',1);

if(su) alert("Succes. Write custom code to delete row from server");

else alert("Allready deleted or not in list");

});

//添加空行

$("#add").click(function(){

var datarow = {};

var su=jQuery("#list1").jqGrid('addRowData',99,datarow);

});

jQuery("#list1").jqGrid({

datatype: "local",

height: 250,

colNames:['Inv No','Date', 'Name', 'Amount','Tax','Total','Notes'],

colModel:[

{name:'id',index:'id', width:60, sorttype:"int",editable: true},

{name:'invdate',index:'invdate', width:90, sorttype:"date",editable: true},

{name:'name',index:'name', width:100,edittype:"select",editable: true,editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},

{name:'amount',index:'amount', width:80, align:"right",editable: true,sorttype:"float"},

{name:'tax',index:'tax', width:80, align:"right",sorttype:"float",editable: true},

{name:'total',index:'total', width:80,align:"right",sorttype:"float",editable: true},

{name:'note',index:'note', width:150, sortable:false,editable:true}

cellEdit: true, //表示表格可编辑

cellsubmit:'clientArray', //表示在本地进行修改

caption: "Manipulating Array Data"

});

//定义数组对象

var mydata = [

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

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

{id:"3",invdate:"2007-09-01",name:"TNT",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},

{id:"4",invdate:"2007-10-04",name:"TNT",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},

{id:"5",invdate:"2007-10-05",name:"ARAMEX",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},

{id:"6",invdate:"2007-09-06",name:"ARAMEX",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},

{id:"7",invdate:"2007-10-04",name:"ARAMEX",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},

{id:"8",invdate:"2007-10-03",name:"TNT",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},

{id:"9",invdate:"2007-09-01",name:"TNT",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}

];

//把数据数据添加到grid

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

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

});