标签:
see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data
本文给出jqgrid和laravel的Eloquent 数据交互接口。
通过http://localhost:8000/json去获取数据,在请求的时候,还会加上一些默认参数。
http://localhost:8000/json?_search=false&nd=1422412397217&rows=10&page=1&sidx=id&sord=desc
这个是真正在访问的时候请求数据参数。
function pageInit() { var lastsel; jQuery("#list4").jqGrid({ width:"800", url: ‘http://localhost:8000/json‘, datatype: "json", colNames: [‘Inv No‘, ‘game_name‘, ‘game_id‘, ‘game_server‘, ‘game_auth‘, ‘created_at‘, ‘updated_at‘], colModel: [ {name: ‘id‘, index: ‘id‘, width: 55}, {name: ‘game_name‘, index: ‘game_name‘, width: 90, editable: true}, {name: ‘game_id‘, index: ‘game_id‘, width: 100, editable: true}, {name: ‘game_server‘, index: ‘game_server‘, width: 80, align: "right", editable: true}, {name: ‘game_auth‘, index: ‘game_auth‘, width: 80, align: "right", editable: true}, {name: ‘created_at‘, index: ‘created_at‘, width: 200, align: "right", editable: true}, {name: ‘updated_at‘, index: ‘updated_at‘, width: 150, sortable: false, editable: true} ], rowNum: 10, rowList: [10, 20, 30], pager: ‘#pager2‘, sortname: ‘id‘, viewrecords: true, sortorder: "desc", onSelectRow: function (id) { if (id && id !== lastsel) { // alert("hello"); jQuery(‘#list4‘).jqGrid(‘restoreRow‘, lastsel); jQuery(‘#list4‘).jqGrid(‘editRow‘, id, true); lastsel = id; } }, editurl: "http://www.trirand.com/blog/jqgrid/server.php", caption: "Using events example" }); jQuery("#list4").jqGrid(‘navGrid‘, "#pager2", {edit: false, add: false, del: false}); } </script>
服务器端代码:
public function json() { $all = ModelAccount::all(); // $total = $all->count() / Input::get("rows"); $total = ceil($all->count()/Input::get("rows"));//*Input::get("rows") / 10; return ‘{"page":"‘.Input::get("page").‘","total":"‘.$total.‘","records":"‘.$all->count().‘","rows":‘.$all.‘}‘; //return $all; }
这是一种最原始的方式。出来的界面如下图
感觉jqgrid是不会自己排序的,每次点击排序的话,会发送请求给服务器端,服务器端会再执行一次数据库查询。这点感觉效率不是很高。
通过点击Inv No上下排序的话,会再次发送一个请求。
http://localhost:8000/json?_search=false&nd=1422416288639&rows=10&page=1&sidx=id&sord=asc
如果点击game_name的话,请求又变成了
http://localhost:8000/json?_search=false&nd=1422416317800&rows=10&page=1&sidx=game_name&sord=asc
根据分析,sord是决定排序是倒序还是顺序。sidx是决定根据哪个字段来进行排序。
那么服务器端需要根据该请求做相应的判断。
public function json() { $all = ModelAccount::orderBy(Input::get("sidx"), Input::get("sort"))->get(); $total = ceil($all->count()/Input::get("rows"));//*Input::get("rows") / 10; return ‘{"page":"‘.Input::get("page").‘","total":"‘.$total.‘","records":"‘.$all->count().‘","rows":‘.$all.‘}‘; //return $all; }
我们看到每次查询的时候时候都会把数据库的表全部遍历一遍,从效率优化的角度,应该每次只返回相应数量的数据就可以了。
按照上例,每次只需要取10条数据就可以了。
服务器端相应代码修改如下:
public function json() { $value = ModelAccount::orderBy(Input::get("sidx"), Input::get("sort"))->take(Input::get("rows"))->get(); $all = ModelAccount::all()->count(); $total = ceil($all/Input::get("rows"));//*Input::get("rows") / 10; return ‘{"page":"‘.Input::get("page").‘","total":"‘.$total.‘","records":"‘.$all.‘","rows":‘.$value.‘}‘; //return $all; }
通过chrome分析可以得到,确实每次只拉出来10条数据。
解决了数量问题,那么需要解决数据从哪里开始的问题了。
我们来看,如果用户切换到第二个页面的话,那么相应的请求就变成
http://localhost:8000/json?_search=false&nd=1422417279445&rows=10&page=2&sidx=id&sord=desc
服务器端的代码相应需要修改
public function json() { $offset = (Input::get("page") - 1) * Input::get("rows"); $value = ModelAccount::orderBy(Input::get("sidx"), Input::get("sort"))->take(Input::get("rows"))->offset($offset)->get();//->paginate(Input::get("rows"))->getFrom($offset);//take(20)->offset(10)->get(); $all = ModelAccount::all()->count(); $total = ceil($all/Input::get("rows"));//*Input::get("rows") / 10; return ‘{"page":"‘.Input::get("page").‘","total":"‘.$total.‘","records":"‘.$all.‘","rows":‘.$value.‘}‘; }
每次查询的数据量是根据界面数据给出来的,在代码中可以通过rowList来指定几种。
通过点击搜索,可以弹出搜索对话框。
点击Find之后,会向服务器发送请求。
主要是4个参数
1._search=true
2.searchField=id
3.searchString=868
4.searchOper=eq
那么我们相应的服务器端代码修改
public function json() { $searchField=‘‘; $searchOper=‘‘; $searchString=‘‘; $value=‘‘; $all=‘‘; $offset = (Input::get("page") - 1) * Input::get("rows"); if(!strcmp(Input::get("_search"), "true")){ $searchField=Input::get("searchField"); $searchOper=Input::get("searchOper"); if(!strcmp($searchOper, "eq")) {//equal $searchOper="="; } else if(!strcmp($searchOper,"ne")) { //not equal $searchOper=""; } else if(!strcmp($searchOper,"bw")) { //begin with } else if(!strcmp($searchOper,"bn")) { //not begin with } else if(!strcmp($searchOper,"ew")) { //ends with } else if(!strcmp($searchOper,"en")) { //not ends with } else if(!strcmp($searchOper,"cn")) { //contains } else if(!strcmp($searchOper,"nc")) { //not contains } else if(!strcmp($searchOper,"nu")) { //is null } else if(!strcmp($searchOper,"nn")) { //not is null } else if(!strcmp($searchOper,"in")) { //is null } else if(!strcmp($searchOper,"ni")) { //is null } $searchString=Input::get("searchString"); $value = ModelAccount::where($searchField, $searchOper, $searchString)->orderBy(Input::get("sidx"), Input::get("sort"))->take(Input::get("rows"))->offset($offset)->get();//->paginate(Input::get("rows"))->getFrom($offset);//take(20)->offset(10)->get(); $all = ModelAccount::where($searchField, $searchOper, $searchString)->count(); } else { $value = ModelAccount::orderBy(Input::get("sidx"), Input::get("sort"))->take(Input::get("rows"))->offset($offset)->get();//->paginate(Input::get("rows"))->getFrom($offset);//take(20)->offset(10)->get(); $all = ModelAccount::all()->count(); } $total = ceil($all/Input::get("rows"));//*Input::get("rows") / 10; return ‘{"page":"‘.Input::get("page").‘","total":"‘.$total.‘","records":"‘.$all.‘","rows":‘.$value.‘}‘; }
如何去除多余的搜索条件?
修改对应语言文件的search段中odata.
odata: [{ oper:‘eq‘, text:‘等于\u3000\u3000‘},{ oper:‘ne‘, text:‘不等\u3000\u3000‘},{ oper:‘lt‘, text:‘小于\u3000\u3000‘},{ oper:‘le‘, text:‘小于等于‘},{ oper:‘gt‘, text:‘大于\u3000\u3000‘},{ oper:‘ge‘, text:‘大于等于‘},{ oper:‘bw‘, text:‘开始于‘},{ oper:‘bn‘, text:‘不开始于‘},{ oper:‘in‘, text:‘属于\u3000\u3000‘},{ oper:‘ni‘, text:‘不属于‘},{ oper:‘ew‘, text:‘结束于‘},{ oper:‘en‘, text:‘不结束于‘},{ oper:‘cn‘, text:‘包含\u3000\u3000‘},{ oper:‘nc‘, text:‘不包含‘},{ oper:‘nu‘, text:‘不存在‘},{ oper:‘nn‘, text:‘存在‘}],
双击某一行之后,可以进行修改
通过添加
jQuery("#list4").jqGrid(‘inlineNav‘,"#pager2");
会使用内部编辑。
编辑了数据,那么我们怎么提交到数据库呢?
首先需要我们在laravel里面添加一条post路由。
Route::post(‘edit_jqgrid‘, array(‘as‘ => ‘edit_jqgrid‘, ‘uses‘ => ‘ControllerAccount@edit_jqgrid‘));
在jqgrid的javascript里面添加:
editurl: http://localhost:8000/edit_jqgrid,
在编辑保存的时候,通过chrome分析确实是发送了edit_jqgrid的post请求。
jQuery(‘#list4‘).jqGrid(‘navGrid‘, ‘#pager2‘, { edit: true, add : true, del : true, search :true, searchtext: "查找", addtext: "添加", edittext: "编辑", deltext: "删除", refreshtext:"刷新" } , { closeOnEscape: true,//Closes the popup on pressing escape key reloadAfterSubmit :true, drag :true, afterSubmit :function (response, postdata) { if (response.responseText == "") { $(this).jqGrid(‘setGridParam‘, { datatype: ‘json‘ }).trigger(‘reloadGrid‘);//Reloads the grid after edit return [true, ""]; } else { $(this).jqGrid(‘setGridParam‘, { datatype: ‘json‘ }).trigger(‘reloadGrid‘); //Reloads the grid after edit return [false, response.responseText];//Captures and displays the response text on th Edit window } }, editData: { id: function () { var sel_id = $(‘#list4‘).jqGrid(‘getGridParam‘, ‘selrow‘) ; var value = $(‘#list4‘).jqGrid(‘getCell‘,sel_id, ‘id‘); return value; } } } , { closeAfterAdd: true,//Closes the add window after add afterSubmit:function (response, postdata) { if (response.responseText == "") { $(this).jqGrid(‘setGridParam‘,{ datatype: ‘json‘ }).trigger(‘reloadGrid‘);//Reloads the grid after Add return [true, ‘‘]; } else { $(this).jqGrid(‘setGridParam‘, { datatype: ‘json‘ }).trigger(‘reloadGrid‘)//Reloads the grid after Add return [false, response.responseText]; } } }, { //DELETE closeOnEscape: true, closeAfterDelete :true, reloadAfterSubmit : true, drag:true, afterSubmit:function (response, postdata) { if (response.responseText == "") { $("#list4").trigger("reloadGrid", [{current: true}]) ; return [false, response.responseText]; } else { $(this).jqGrid(‘setGridParam‘, { datatype: ‘json‘ }).trigger(‘reloadGrid‘); return [true, response.responseText]; } } , delData: { EmpId: function () { var sel_id = $(‘#list4‘).jqGrid(‘getGridParam‘, ‘selrow‘); var value = $(‘#list4‘).jqGrid(‘getCell‘,sel_id, ‘id‘); return value; } } }, {//SEARCH closeOnEscape: true } ) ;
通过chrome分析,可以看到里面有个oper为edit
通过chrome分析,可以看到里面有个oper为add
通过chrome分析,可以看到里面有个oper为del
现有模块的本地化,可以使用以下语句
<script src="js/i18n/grid.locale-cn.js" type="text/javascript"></script>
其他文字的本地化,在这里面需要注意一点,尽量使用统一的本地化模式,因为本来laravel里面会有一个本地化的模块。
在app/lang里面增加一个cn目录,新建一个message.php文件,内容如下:
<?php /** * Created by PhpStorm. * User: Administrator * Date: 2015/1/30 * Time: 11:11 */ return array( ‘welcome‘ => ‘Welcome to our application‘, ‘id‘ => ‘编号‘, ‘game_name‘ => ‘玩家名字‘, ‘game_id‘ => ‘玩家编号‘, ‘game_server‘ => ‘游戏区‘, ‘game_auth‘ => ‘权限‘, ‘created_at‘ => ‘创建时间‘, ‘updated_at‘ => ‘更新时间‘ );
修改config/app.php文件,将locale设置为cn.
修改jqgrid代码:
datatype: "json", colNames: [‘{{Lang::get(‘message.id‘)}}‘, ‘{{Lang::get(‘message.game_name‘)}}‘, ‘{{Lang::get(‘message.game_id‘)}}‘, ‘{{Lang::get(‘message.game_server‘)}}‘, ‘{{Lang::get(‘message.game_auth‘)}}‘, ‘{{Lang::get(‘message.created_at‘)}}‘, ‘{{Lang::get(‘message.updated_at‘)}}‘], colModel: [
修改完成之后显示界面如下:
这个字体个人觉得比较难看,我想改成微软雅黑字体,并且字体大小增加一倍。
<STYLE type="text/css"> /* Jqgrid */ .ui-jqgrid .ui-jqgrid-view {font-size:14px;} /*修改grid标题的字体大小*/ .ui-jqgrid-sortable {font-size:14px;} /*修改列名的字体大小*/ .ui-widget-content .jqgrow .ui-row-ltr .ui-jqgrid-view {font-size:14px;} /*修改表格内容字体,不起作用*/ </style>
这个时候只是修改表格里面的字体大小,其他的大小还没有修改。
添加:
<STYLE type="text/css"> /* Jqgrid */ .ui-jqgrid .ui-jqgrid-view {font-size:14px;} /*修改grid标题的字体大小*/ .ui-jqgrid .ui-jqgrid-pager {font-size:14px;} /*修改grid标题的字体大小*/ .ui-jqgrid-sortable {font-size:14px;} /*修改列名的字体大小*/ .ui-widget-content .jqgrow .ui-row-ltr .ui-jqgrid-view {font-size:14px;} /*修改表格内容字体,不起作用*/ </style>
添加:
<STYLE type="text/css"> /* Jqgrid */ .ui-jqgrid .ui-jqgrid-view {font-size:14px;} /*修改grid标题的字体大小*/ .ui-jqgrid .ui-jqgrid-pager {font-size:14px;} /*修改grid标题的字体大小*/ .ui-jqgrid .ui-jqgrid-titlebar {font-size: 16px;} .ui-jqgrid-sortable {font-size:14px;} /*修改列名的字体大小*/ .ui-widget-content .jqgrow .ui-row-ltr .ui-jqgrid-view {font-size:14px;} /*修改表格内容字体,不起作用*/ </style>
最后的css代码为:
<STYLE type="text/css"> /* Jqgrid */ .ui-jqgrid .ui-jqgrid-view {font-size:14px;} /*修改grid标题的字体大小*/ .ui-jqgrid .ui-jqgrid-pager {font-size:14px;} /*修改grid标题的字体大小*/ .ui-jqgrid .ui-jqgrid-titlebar {font-size: 16px;} .ui-jqdialog-title {font-size: 14px;} .ui-jqgrid-sortable {font-size:14px;} /*修改列名的字体大小*/ .ui-widget-content .jqgrow .ui-row-ltr .ui-jqgrid-view {font-size:14px;} /*修改表格内容字体,不起作用*/ .CaptionTD {font-size:14px} .fm-button {font-size:14px} .ui-jqdialog {font-size: 14px} </style>
在navGrid的搜索参数里面增加
{//SEARCH closeOnEscape: true, multipleSearch:true, //multipleGroup:true }
翻译成正常的url地址为:
根据分析组合查询分为大致的4种情况:
1.同时满足一个条件
2.同时满足n个条件
3.满足任一一个条件
4.满足任一n个条件
根据以上分析,服务器端相应的代码修改为
public function json() { $searchField=‘‘; $searchOper=‘‘; $searchString=‘‘; $value=‘‘; $all=‘‘; $filters=‘‘; $offset = (Input::get("page") - 1) * Input::get("rows"); $filters = Input::get("filters"); if($filters) { $json_data = json_decode($filters); $groupOp = $json_data->groupOp; $rules = $json_data->rules; //return $rules; $r=‘‘; $number=0; foreach($rules as $rule) { $rule->op = "="; if($number == 0) { $r = $r . ‘ ‘ . $rule->field . ‘ ‘ . $rule->op . ‘ ‘ . $rule->data;//.‘"‘; } else { if(!strcmp($groupOp, "AND")) { $r = $r . ‘ and ‘ . $rule->field . ‘ ‘ . $rule->op . ‘ ‘ . $rule->data;//.‘"‘; } else { $r = $r . ‘ or ‘ . $rule->field . ‘ ‘ . $rule->op . ‘ ‘ . $rule->data;//.‘"‘; } } $number = $number+1; } //$r=$r.‘ " ‘; //$r=‘id = 901 or game_server = 888‘; $value = ModelAccount::whereRaw($r)->orderBy(Input::get("sidx"), Input::get("sort"))->take(Input::get("rows"))->offset($offset)->get();//->paginate(Input::get("rows"))->getFrom($offset);//take(20)->offset(10)->get(); $all = ModelAccount::whereRaw($r)->count(); } else { if (!strcmp(Input::get("_search"), "true")) { $searchField = Input::get("searchField"); $searchOper = Input::get("searchOper"); if (!strcmp($searchOper, "eq")) {//equal $searchOper = "="; } else if (!strcmp($searchOper, "ne")) { //not equal $searchOper = ""; } else if (!strcmp($searchOper, "bw")) { //begin with } else if (!strcmp($searchOper, "bn")) { //not begin with } else if (!strcmp($searchOper, "ew")) { //ends with } else if (!strcmp($searchOper, "en")) { //not ends with } else if (!strcmp($searchOper, "cn")) { //contains } else if (!strcmp($searchOper, "nc")) { //not contains } else if (!strcmp($searchOper, "nu")) { //is null } else if (!strcmp($searchOper, "nn")) { //not is null } else if (!strcmp($searchOper, "in")) { //is null } else if (!strcmp($searchOper, "ni")) { //is null } $searchString = Input::get("searchString"); $value = ModelAccount::where($searchField, $searchOper, $searchString)->orderBy(Input::get("sidx"), Input::get("sort"))->take(Input::get("rows"))->offset($offset)->get();//->paginate(Input::get("rows"))->getFrom($offset);//take(20)->offset(10)->get(); $all = ModelAccount::where($searchField, $searchOper, $searchString)->count(); } else { $value = ModelAccount::orderBy(Input::get("sidx"), Input::get("sort"))->take(Input::get("rows"))->offset($offset)->get();//->paginate(Input::get("rows"))->getFrom($offset);//take(20)->offset(10)->get(); $all = ModelAccount::all()->count(); } } $total = ceil($all/Input::get("rows"));//*Input::get("rows") / 10; return ‘{"page":"‘.Input::get("page").‘","total":"‘.$total.‘","records":"‘.$all.‘","rows":‘.$value.‘}‘; }
具体还没有分析
jqgrid添加以下代码:
jQuery("#list4").jqGrid(‘filterToolbar‘,{searchOperators : true});
界面效果为:
这个时候的查询请求为:
这种情况会比较复杂,因为game_auth字段是数据库中的字段,可能无法做到一定的通用性。
如果同时查询两个字段的话,请求为:
服务器端相应的代码修改为:
public function json() { $searchField=‘‘; $searchOper=‘‘; $searchString=‘‘; $value=‘‘; $all=‘‘; $filters=‘‘; $offset = (Input::get("page") - 1) * Input::get("rows"); $filters = Input::get("filters"); if($filters) { $json_data = json_decode($filters); $groupOp = $json_data->groupOp; $rules = $json_data->rules; //return $rules; $r=‘‘; $number=0; foreach($rules as $rule) { $rule->op = "="; if($number == 0) { $r = $r . ‘ ‘ . $rule->field . ‘ ‘ . $rule->op . ‘ ‘ . $rule->data;//.‘"‘; } else { if(!strcmp($groupOp, "AND")) { $r = $r . ‘ and ‘ . $rule->field . ‘ ‘ . $rule->op . ‘ ‘ . $rule->data;//.‘"‘; } else { $r = $r . ‘ or ‘ . $rule->field . ‘ ‘ . $rule->op . ‘ ‘ . $rule->data;//.‘"‘; } } $number = $number+1; } //$r=$r.‘ " ‘; //$r=‘id = 901 or game_server = 888‘; $value = ModelAccount::whereRaw($r)->orderBy(Input::get("sidx"), Input::get("sort"))->take(Input::get("rows"))->offset($offset)->get();//->paginate(Input::get("rows"))->getFrom($offset);//take(20)->offset(10)->get(); $all = ModelAccount::whereRaw($r)->count(); } else { if (!strcmp(Input::get("_search"), "true")) { $searchField = Input::get("searchField"); if($searchField) { $searchOper = Input::get("searchOper"); if (!strcmp($searchOper, "eq")) {//equal $searchOper = "="; } else if (!strcmp($searchOper, "ne")) { //not equal $searchOper = ""; } else if (!strcmp($searchOper, "bw")) { //begin with } else if (!strcmp($searchOper, "bn")) { //not begin with } else if (!strcmp($searchOper, "ew")) { //ends with } else if (!strcmp($searchOper, "en")) { //not ends with } else if (!strcmp($searchOper, "cn")) { //contains } else if (!strcmp($searchOper, "nc")) { //not contains } else if (!strcmp($searchOper, "nu")) { //is null } else if (!strcmp($searchOper, "nn")) { //not is null } else if (!strcmp($searchOper, "in")) { //is null } else if (!strcmp($searchOper, "ni")) { //is null } $searchString = Input::get("searchString"); $value = ModelAccount::where($searchField, $searchOper, $searchString)->orderBy(Input::get("sidx"), Input::get("sort"))->take(Input::get("rows"))->offset($offset)->get();//->paginate(Input::get("rows"))->getFrom($offset);//take(20)->offset(10)->get(); $all = ModelAccount::where($searchField, $searchOper, $searchString)->count(); } else { $game_name=Input::get("game_name"); $game_id=Input::get("game_id"); $game_server=Input::get("game_server"); $game_auth=Input::get("game_auth"); $created_at=Input::get("created_at"); $updated_at=Input::get("updated_at"); $r=‘‘; if($game_name) { $r=$r.‘ game_name =‘.$game_name; } if($game_auth) { if($r) { $r=$r.‘ and ‘;} $r=$r.‘ game_auth =‘.$game_auth; } if($game_server) { if($r) { $r=$r.‘ and ‘;} $r=$r.‘ game_server=‘.$game_server; } if($game_id) { if($r) { $r=$r.‘ and ‘;} $r=$r.‘ game_id=‘.$game_id; } if($created_at) { if($r) { $r=$r.‘ and ‘;} $r=$r.‘ created_at=‘.$created_at; } if($updated_at) { if($r) { $r=$r.‘ and ‘;} $r=$r.‘ updated_at=‘.$updated_at; } $value = ModelAccount::whereRaw($r)->orderBy(Input::get("sidx"), Input::get("sort"))->take(Input::get("rows"))->offset($offset)->get();//->paginate(Input::get("rows"))->getFrom($offset);//take(20)->offset(10)->get(); $all = ModelAccount::whereRaw($r)->count(); } } else { $value = ModelAccount::orderBy(Input::get("sidx"), Input::get("sort"))->take(Input::get("rows"))->offset($offset)->get();//->paginate(Input::get("rows"))->getFrom($offset);//take(20)->offset(10)->get(); $all = ModelAccount::all()->count(); } } $total = ceil($all/Input::get("rows"));//*Input::get("rows") / 10; return ‘{"page":"‘.Input::get("page").‘","total":"‘.$total.‘","records":"‘.$all.‘","rows":‘.$value.‘}‘; }
标签:
原文地址:http://www.cnblogs.com/mumutouv/p/4262447.html