新浪博客

jqgrid入门

2022-09-13 09:51阅读：

http://blog.sina.cn/dpool/blog/u/1883437194

官方 demo http://www.trirand.com/blog/jqgrid/jqgrid.html 中文 demo https://blog.mn886.net/jqGrid/
都有年头了，例子里面js版本很老，很多已经不这么用了。
../jqgrid/css/trirand/ui.jqgrid.css jqgrid的css
../jqgrid/css/redmond/jquery-ui-1.8.16.custom.css jquery UI 的css，可以自己下载选择自己喜欢样式

../jquery.mobile-1.4.5/jquery-1.11.1.min.js jquery核心js
../jqgrid/jquery-ui.js jquery UI js，用新版和例子里面的会有不兼容情况
../jqgrid/js/trirand/src/jquery.jqGrid.js jqgrid的js
../jqgrid/js/trirand/i18n/grid.locale-cn.js jqgrid界面语言
《table id='jQgridID'>
《/table>
《div id='pager' class='scroll' >《/div>
jqgrid的表单
jqgrid的工具栏
jqgrid的属性
url: '',
url可以是数据的来源，可以直接写一json文件，也可以是一个网页
editurl:'',
editurl 工具栏操作的处理页面，会传递参数 oper，Request('oper')，值是 'edit'，'add'，'del'。
rowNum: 20,
height: 600,
分页显示的记录数，和表的高度
rownumbers: true,
rownumWidth: 40,
可以增加一列序列号
jQuery('#jQgridPOC').jqGrid('setLabel','rn', '序号', {'text-align':'center','vertical-align':'middle'},'
');
这是给序列号这一列加个标题表头的。
jQuery('#jQgridPOC').setGridParam().hideCol('id');
可以隐藏一列
pager: jQuery('#pager'),
定义工具栏的id
jQuery('#jQgridID').jqGrid('navGrid','#pager',{search:false,edit:false,add:false,del:true,save:false,view:false,cancel:false,refresh:false,deltext:'删除'});
jQuery('#jQgridID').jqGrid('inlineNav','#pager',{search:false,view:false,edit:true,add:true,save:true,cancel:true,del:false,refreshtext:'刷新',addtext:'添加',edittext:'编辑',savetext:'保存',canceltext:'取消'});
工具有 search 搜索 view 查看 edit 编辑 add 添加 del 删除 save 保存 cancel 取消 refresh 刷新，刷新不是重新取数据。对应的有按钮文字，如 asarchtxt
jqGrid实现行拖拽功能，并且保存排序数据
jQuery('#jQgridID').jqGrid('sortableRows',{
update : function(e,ui){
//获取当前显示的数据
//var rows = $('#jQgridID').jqGrid('getRowData');
//var rowNum = $('#jQgridID').jqGrid('getGridParam', 'rowNum'); //获取显示配置记录数量
//var total = $('#jQgridID').jqGrid('getGridParam', 'records'); //获取查询得到的总记录数量
//设置rowNum为总记录数量并且刷新jqGrid，使所有记录现出来调用getRowData方法才能获取到所有数据
//$('#jQgridID').jqGrid('setGridParam', { rowNum: total }).trigger('reloadGrid');
// 获取jqgrid数据（array）
var idata = $('#jQgridID').jqGrid('getRowData');
// 将jqgrid之array数据转为json，并赋给隐藏域
$('#igrid_hidden').val(JSON.stringify(idata));
//obj.jqGrid('setGridParam', { rowNum: rowNum }).trigger('reloadGrid'); //还原原来显示的记录数量
//txt=$('igrid_hidden').val();
txt=JSON.stringify(idata);
$.post('ajax_info.asp',txt,function(result){
$('#infodiv').html(result);
});
//ajax 使用post方式发送数据到处理页面
}
});
ajax_info.asp 需要数据流方式接收数据，参数可以通过 request.QueryString('') 接收
Dim reqData
With CreateObject('Adodb.Stream')
.Mode = 3
.Type = 1
.Open
.Write Request.BinaryRead(Request.TotalBytes)
.Position = 0
.Type = 2
.Charset = 'UTF-8'
reqData = .ReadText(-1)
.Close
End With
reqData就是接收到了json数据，可以处理后存数据库。

我的更多文章

下载客户端阅读体验更佳

APP专享