jqgrid是怎样对数据库进行增删查改的

jQuery("#crud")jqGrid({

url:'serverphpq=2',

datatype:"json",

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

colModel:[

{name:'id',index:'id', width:55, editable:true, editoptions:{readonly:true}, sorttype:'int'},

{name:'invdate',index:'invdate', width:90, sorttype:'date', editable:true, editrules:{date:true},formatter:'date', datefmt:'d/m/Y'},

{name:'name',index:'name asc, invdate', width:100,editable:true},

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

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

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

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

],

rowNum:10,

rowTotal: 50,

rowList:[10,20,30],

pager: '#pcrud',

sortname: 'id',

loadonce: true,

viewrecords: true,

sortorder:"desc",

editurl: 'serverphp', // this is dummy existing url

caption:"CRUD on Local Data"

});

jQuery("#crud")jqGrid('navGrid','#pcrud',{});

其实就是利用jqGrid自带的增删改按钮对grid中的数据进行 *** 作，不同的是，每次 *** 作后台不做任何事情。

所以要将editurl设为一个不作任何事情的url——比如一个空doGet/doPost方法的servlet。

但是不能不设置或者设置一个不存在的url，否则jqGrid会报一个404的错误提示。

子表格也是一个jqgrid，你可以像 *** 作主表格一样 *** 作子表格的

subGridRowExpanded: function(subgrid_id, row_id) {

// we pass two parameters

// subgrid_id is a id of the div tag created whitin a table data

// the id of this elemenet is a combination of the "sg_" + id of the row

// the row_id is the id of the row

// If we wan to pass additinal parameters to the url we can use

// a method getRowData(row_id) - which returns associative array in type name-value

// here we can easy construct the flowing

var subgrid_table_id, pager_id;

subgrid_table_id = subgrid_id+"_t";

pager_id = "p_"+subgrid_table_id;

$("#"+subgrid_id)html("<table id='"+subgrid_table_id+"' class='scroll'</table<div id='"+pager_id+"' class='scroll'</div");

jQuery("#"+subgrid_table_id)jqGrid({

url:"subgridphpq=2&id="+row_id,

datatype: "xml",

colNames: ['No','Item','Qty','Unit','Line Total'],

colModel: [

{name:"num",index:"num",width:80,key:true},

{name:"item",index:"item",width:130},

{name:"qty",index:"qty",width:70,align:"right"},

{name:"unit",index:"unit",width:70,align:"right"},

{name:"total",index:"total",width:70,align:"right",sortable:false}],

rowNum:20,

pager: pager_id,

sortname: 'num',

sortorder: "asc",

然后子表格的 *** 作就是jQuery("#"+subgrid_table_id)jqGrid('getGridParam','selarrrow');

1

后台向前台传的数据

{"page":1,"total":1,"records":8,"rows":[{"sn":1,"id":1,"devtypename":"台式机","nextdevsn":42,"devcodehead":"C-"},{"sn":2,"id":2,"devtypename":"笔记本","nextdevsn":1,"devcodehead":"B-"},{"sn":3,"id":3,"devtypename":"服务器","nextdevsn":6,"devcodehead":"S-"},{"sn":4,"id":4,"devtypename":"网络设备","nextdevsn":1,"devcodehead":"N-"},{"sn":5,"id":5,"devtypename":"扫描打印设备","nextdevsn":1,"devcodehead":"P-"},{"sn":6,"id":6,"devtypename":"UPS","nextdevsn":1,"devcodehead":"U-"},{"sn":7,"id":7,"devtypename":"投影仪","nextdevsn":3,"devcodehead":"Y-"},{"sn":8,"id":8,"devtypename":"其他设备","nextdevsn":16,"devcodehead":"O-"}]}

前台的格式

js:

$(function(){

jQuery("#list2")jqGrid({ url:'Devtypedooper=list', datatype: "json", colNames:['','id','名称', '下一个新设备的序号', '设备编号头',' *** 作'], colModel:[ {name:'sn',index:'sn', width:20,sortable:false,align:"right",search:false}, {name:'id',index:'id', width:30,align:"right",search:false,key:true}, {name:'devtypename',index:'devtypename', width:200, editable:true,align:"center",editrules:{custom:true, custom_func:vali_devtypename}}, {name:'nextdevsn',index:'nextdevsn', width:100, editable:true, align:"right",editrules:{custom:true, custom_func:vali_nextdevsn}}, {name:'devcodehead',index:'devcodehead', width:100, editable:true, align:"center",editrules:{custom:true, custom_func:vali_devcodehead}}, {name:'act2',index:'act2', width:60,fixed:true, sortable:false, resize:false, formatter:'actions',formatoptions:{keys:false,editbutton:true,delbutton:true},align:"center"} ], rowNum:15, rowList:[10,15,20,50], pager: '#pager2', jsonReader:{ repeatitems : false }, height:"auto", width:800, strinkToFit:true, sortname: 'id', viewrecords: true, sortorder: "asc", editurl: "Devtypedo", caption:"设备类型" }); jQuery("#list2")jqGrid('navGrid',"#pager2",{search:false,edit:false,add:false,del:true}); }); html:<body ><table id="list2"></table><div id="pager2"></div> </body>

官方例子>

rownum是jqgrid分页时每页记录数，ajax请求发送到后台时request中rows的值就是jqgrid中rownum的值，如果设置设置rownum设置为10，不管后台返回记录数是多少，最多只显示10条。如果设置成0那么jqgrid不会显示任何数据。如果设置为-1则显示后台返回的所有记录。具体可查看jqgrid的API

>

排序的关键是这两个属性： sortname: 'eight',     //默认表格加载时根据eight列排序

            sortorder: 'asc',       //默认的排序方式,跟数据库的asc,desc一样

加上sortable:true就能排序，并不是加在colModel中。

1:PHP中可以用PHP_EOL来替代，以提高代码的可移植性 因为换行在不同系统会有不同的表现形式 在unix系列用 \n 在windows系列用 \r\n 在mac用 \r 2：例如 $content=str_replace(PHP_EOL,"",$content);

<div class="main" style="margin-left:400px;">    

    <table id="list_grid" class="grid"></table>

    <div id="list_pager"></div>

</div>

jqgrid部分：

$("#stocklist_grid")jqGrid({

url:'ajaxphpaction=get_stock_list',

datatype: "json",

mtype: "POST",

colNames:['ID', 'Code', 'Name', 'Mark'],

colModel:[

{name:'id',index:'id',width:60,align:'center'},

{name:'code',index:'code', wdith: 80, align:'center', editable:true, edittype:'textarea', editoptions:{rows:'10'}},

{name:'name',index:'name', width: 80, align:'center'},

{name:'mark',index:'mark', width: 220, align:'left', formatter:function(cellvalue, options, rowObj){

                    return "<span id='"+rowObjid+"' class='mark_data' style='display:block; width:100%; cursor:pointer;'>"+cellvalue+"</span>";

}}

],

以上就是关于jqgrid是怎样对数据库进行增删查改的全部的内容，包括:jqgrid是怎样对数据库进行增删查改的、怎么获取jqgrid表格的选中行、jqgrid和easyui，两方面的高手进来求指点。。等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！