52,797
社区成员
发帖
与我相关
我的任务
分享jqgrid数据显示问题
我只要添加loadonce:true这个属性，jqgrid就只显示10条数据
如果不加loadonce:true这个属性，filterToolbar就不能用
请问彼解决这个问题？？
如果不加loadonce:true这个属性，filterToolbar就不能用
请问彼解决这个问题？？
$(function(){
jQuery("#list").jqGrid({
url:'do.php?action=list', //请求数据的url地址
datatype: "json", //请求的数据类型
height: 600,
width: 1100,
colNames:['订单号','订单ID','客户姓名','订单SKU','产品名称', '数量','订单状态'], //数据列名称（数组）
colModel:[ //数据列各参数信息设置
{name:'order_id',index:'order_id', editable:true, width:190,align:'center',title:false},
{name:'order_item_id',index:'order_item_id', width:130,title:false,formatter:imageFormat},
{name:'buyer_name',index:'buyer_name', width:100},
{name:'sku',index:'sku', width:90},
{name:'product_name',index:'product_name', width:250,align:'center'},
{name:'quantity_purchased',index:'quantity_purchased', width:40,align:'center'},
{name:'shipments',index:'shipments', width:60, sortable:false, align:'center'}
],
rowNum:10, //每页显示记录数
rowList:[10,20,30], //分页选项，可以下拉选择每页显示记录数
pager: '#pager', //表格数据关联的分页条，html元素
autowidth: true, //自动匹配宽度
height:275, //设置高度
gridview:true, //加速显示
viewrecords: true, //显示总记录数
loadonce:true,
rownumbers: true,
multiselect: false, //可多选，出现多选框
multiselectWidth: 25, //设置多选列宽度
sortable:true, //可以排序
sortname: 'order_id', //排序字段名
sortorder: "desc", //排序方式：倒序，本例中设置默认按id倒序排序
loadComplete:function(data){ //完成服务器请求后，回调函数
if(data.records==0){ //如果没有记录返回，追加提示信息，删除按钮不可用
$("p").appendTo($("#list")).addClass("nodata").html('找不到相关数据！');
$("#del_btn").attr("disabled",true);
}else{ //否则，删除提示，删除按钮可用
$("p.nodata").remove();
$("#del_btn").removeAttr("disabled");
}
}
});
jQuery("#list").jqGrid('navGrid','#pager',{del:false,add:false,edit:false,search:false});
jQuery("#list").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
});
...全文
请发表友善的回复…
发表回复
qq_17068889 2015-11-11
- 打赏
- 举报
楼主有解决办法了没？
baidu_16500591 2015-01-16
- 打赏
- 举报
遇到同样的问题，求大神解答....
zhuhao 2013-05-08
- 打赏
- 举报
请各位大大帮忙看看啊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="jNotify, jquery插件" />
<meta name="description" content="Helloweba演示平台，演示XHTML、CSS、jquery、PHP案例和示例" />
<title>jqGrid：强大的表格插件的应用-Helloweba演示平台</title>
<!--<link rel="stylesheet" type="text/css" href="/css/main.css" />-->
<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.2.custom.css" />
<link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-cn.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/jquery.fancybox.js" type="text/javascript"></script>
<script src="js/jquery.message.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/fancybox.css" />
</head>
<body>
<div id="main">
<h2 class="top_title">销售订单</h2>
<div class="grid_table">
<table id="list"></table>
<div id="pager"></div>
</div>
</div>
<script type="text/javascript">
$(function(){
jQuery("#list").jqGrid({
url:'do.php?action=list', //请求数据的url地址
datatype: "json", //请求的数据类型
colNames:['订单号','订单ID','客户姓名','订单SKU','产品名称', '数量','订单状态'], //数据列名称（数组）
colModel:[ //数据列各参数信息设置
{name:'order_id',index:'order_id', editable:true, width:80,align:'center',title:false},
{name:'order_item_id',index:'order_item_id', width:180,title:false,formatter:imageFormat},
{name:'buyer_name',index:'buyer_name', width:120},
{name:'sku',index:'sku', width:120},
{name:'product_name',index:'product_name', width:100,align:'center'},
{name:'quantity_purchased',index:'quantity_purchased', width:80,align:'center'},
{name:'shipments',index:'shipments', width:80, sortable:false, align:'center'}
],
rowNum:10, //每页显示记录数
rowList:[10,20,30], //分页选项，可以下拉选择每页显示记录数
pager: '#pager', //表格数据关联的分页条，html元素
autowidth: true, //自动匹配宽度
height:275, //设置高度
gridview:true, //加速显示
viewrecords: true, //显示总记录数
multiboxonly: true,
multiselect: true, //可多选，出现多选框
multiselectWidth: 25, //设置多选列宽度
sortable:true, //可以排序
sortname: 'order_id', //排序字段名
sortorder: "desc", //排序方式：倒序，本例中设置默认按id倒序排序
loadComplete:function(data){ //完成服务器请求后，回调函数
if(data.records==0){ //如果没有记录返回，追加提示信息，删除按钮不可用
$("p").appendTo($("#list")).addClass("nodata").html('找不到相关数据！');
$("#del_btn").attr("disabled",true);
}else{ //否则，删除提示，删除按钮可用
$("p.nodata").remove();
$("#del_btn").removeAttr("disabled");
}
}
});
jQuery("#list").jqGrid('navGrid','#pager',{del:false,add:false,edit:false,search:false});
jQuery("#list").jqGrid('filterToolbar',{stringResult: true,autosearch:true,searchOnEnter : false});
});
function imageFormat( cellvalue, options, rowObject ){
return '<a onclick="more('+cellvalue+')">'+cellvalue+'</a>';
}
function more(value){
$.fancybox({
'type':'ajax',
'href':'sale_detailed.php?value='+value
});
}
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
<a href="addGrid.html">This takes content using ajax</a>
<a class="various" href="sale_detailed.php" target="_blank">addgrid</a>
<a class="various fancybox.ajax" href="sale_detailed.php">Ajax</a>
<a class='various fancybox' href='sale_detailed.php'>单引号Ajax</a>
</body>
</html>
