在做项目过程中遇到了jqGrid做的数据表格，利用layer+jqGrid做出来的，因为之前没有用过jqGrid做过东西，所以学习了下，在他的官网上下了demo，是结合java开发的，主要是返回数据格式要正确，贴代码：
<?php
/**
* jqGrid 获取数据
*/
namespace Portal\Controller;
use Common\Controller\HomebaseController;
class TestController extends HomebaseController
{
public function index()
{
$this->display(‘:test’);
}
public function getdata()
{
$keyname = I(‘post.sidx’); //排序字段
$valuename = I(‘post.sord’); //asc desc
$rows = I(‘post.rows’); //显示行数
$searchField = I(‘searchField’); //搜索字段 name
$searchString = I(‘searchString’); //搜索值 abc
$searchOper = I(‘searchOper’); //搜索条件 eq
$order = $keyname . ‘ ‘ . $valuename;
$where[$searchField] = array($searchOper, $searchString);
// var_dump(json_encode(I(‘post.’))); //{“_search”:”false”,”nd”:”1495868771208″,”rows”:”10″,”page”:”1″,”sidx”:”id”,”sord”:”desc”}
//{“_search”:”false”,”nd”:”1495868797817″,”rows”:”10″,”page”:”1″,”sidx”:”md5″,”sord”:”asc”}
//{“_search”:”false”,”nd”:”1495868812273″,”rows”:”10″,”page”:”1″,”sidx”:”md5″,”sord”:”desc”}
//{“_search”:”true”,”nd”:”1495870004889″,”rows”:”60″,”page”:”1″,”sidx”:”id”,”sord”:”asc”,”filters”:””,”searchField”:”id”,”searchString”:”9999″,”searchOper”:”eq”}
$nowPage = I(‘page’, 1); //当前分页
$firstRow = $rows * ($nowPage – 1);
$records = M(‘Md5’)->count();
$total = ceil($records / $rows); //总页数
$list = M(‘Md5’)->where($where)->order($order)->limit($firstRow, $rows)->select();
foreach ($list as $k => $v) {
$list[$k][‘id’] = $v[‘id’];
$list[$k][‘cell’] = $v;
}
$data = array(
‘total’ => $total,
‘page’ => $nowPage,
‘records’ => $records,
‘rows’ => $list,
);
echo json_encode($data);
}
}
下面是html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- jqGrid组件基础样式包-必要 -->
<link rel="stylesheet" href="__TMPL__Public/jqgrid/css/ui.jqgrid.css" />
<!-- jqGrid主题包-非必要 -->
<!-- 在jqgrid/css/css这个目录下还有其他的主题包，可以尝试更换看效果 -->
<link rel="stylesheet" href="__TMPL__Public/jqgrid/css/css/redmond/jquery-ui-1.8.16.custom.css" />
<!-- jquery插件包-必要 -->
<!-- 这个是所有jquery插件的基础，首先第一个引入 -->
<script type="text/javascript" src="__TMPL__Public/jqgrid/js/jquery-1.7.1.js"></script>
<!-- jqGrid插件包-必要 -->
<script type="text/javascript" src="__TMPL__Public/jqgrid/js/jquery.jqGrid.src.js"></script>
<!-- jqGrid插件的多语言包-非必要 -->
<!-- 在jqgrid/js/i18n下还有其他的多语言包，可以尝试更换看效果 -->
<script type="text/javascript" src="__TMPL__Public/jqgrid/js/i18n/grid.locale-cn.js"></script>
<title>MD5数据</title>
</head>
<body>
<input type="button" id="button" value="获取选中" name="">
<table id="list2"></table>
<div id="pager2"></div>
<script>
$(function(){
//页面加载完成之后执行
pageInit();
});
function pageInit(){
//创建jqGrid组件
jQuery("#list2").jqGrid(
{
url : "{:U('test/getdata')}",//组件创建完成之后请求数据的url
datatype : "json",//请求数据返回的类型。可选json,xml,txt
mtype : "post",//向后台请求数据的ajax的类型。可选post,get
colNames : [ 'id', 'value', 'md5', 'time' ],//jqGrid的列显示名字
colModel : [ //jqGrid每一列的配置信息。包括名字，索引，宽度,对齐方式.....
{name : 'id',index : 'id',width : 55},
{name : 'value',index : 'value',width : 90},
{name : 'md5',index : 'md5',width : 300},
{name : 'time',index : 'time',width : 180,align : "center"},
],
rowNum : 20,//一页显示多少条
rowList : [ 20, 40, 60 ],//可供用户选择一页显示多少条
pager : '#pager2',//表格页脚的占位符(一般是div)的id
autowidth: true, //自动匹配宽度
sortname : 'id',//初始化的时候排序的字段
sortorder : "asc",//排序方式,可选desc,asc
viewrecords : true,
caption : "MD5数据",//表格的标题名字
multiselect : true,//多选框
});
/*创建jqGrid的操作按钮容器*/
/*可以控制界面上增删改查的按钮是否显示*/
jQuery("#list2").jqGrid('navGrid', '#pager2', {edit : false,add : false,del : true});
}
//此步骤可以做删除操作，代码未完成
$('#button').click(function(event) {
var sels = $("#list2").jqGrid('getGridParam','selarrrow');
console.log(sels);
});
</script>
</body>
</html>
数据库文件和jqGrid文件附上:
顺便贴上懒人插入语句
INSERT INTO cmf_md5_copy(value,md5,time) SELECT value,md5,time FROM cmf_md5_copy
发表回复