加载中…jqgrid入门
(2022-09-13 09:51:42)
标签：
jqgrid行拖拽保存排序 |
分类： IT |
官方
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数据，可以处理后存数据库。
喜欢
0
赠金笔