最近在项目中遇到了需要根据下拉框的条件筛选出符合条件的数据,然后进行列表显示的问题。
在ThinkPHP中进行列表显示的传统过程:通过在后台控制器中查询出数据,然后通过$this->assign()来实现控制器数据向页面的传递,在页面中通过<foreach>或<volist>标签来进行数据的解析,(注:在通过标签进行数据的解析时需要以“$”符号的形式)。
在进行条件查询时,需要通过jquery中ajax的方式将条件GET到后台控制器,后台控制器中接收数据,然后根据条件进行查询,将查询结果返回。
在项目实际操作时遇到了这样的两个问题,(1)当在将数据传递到后台控制器,后台控制器通过查询条件获取查询结果后,只能通过$this->ajaxReturn(查询结果)的方式将数据返回到前台页面的回调函数(在网上看到一个大神说还有一个display的方法显示,一直苦寻未果,若有大神知道,一定记得给说一声,感激不尽!)。而在前台进行解析时是以json的数据格式进行解析,所以无法通过ThinkPHP的模板解析获得数据进行显示(即无法通过"$"符号的方式进行解析显示,"$"符号是javascript中的关键字)。(2)在开始时分页是使用的ThinkPHP中已经封装的分页方法,其在进行分页时是实例化的一个分页对象,然后将分页对象中的分页列表传递到页面进行解析,从而实现页面数据分页。但是在通过ajax请求获取的数据只能返回到回调函数,也无法通过ThinkPHP的解析获取分页列表,从来导致分页无法使用。所以,总的来说,无法通过ThinkPHP解析json数据进行显示。
在网上苦苦寻觅,没有找到什么好办法,所以只好自己硬着头皮写了。因为ThinkPHP无法解析,所以只好通过javascript的方式,将数据解析显示。
1 for(var i=0;i<ss.length;i++) 2 { 3 var infoList=$("<div id='divUserTable' class='divMenuItemTableClass'>"+"<input type='hidden' name='hiddenInfoId' class='hiddenClass' id='hiddenInfoId_"+i+"'"+"value="+"'"+ss[i]["userid"]+"'"+"/>" 4 +"<div id='divUserTableSelect' class='fontNoneWeight'><input type='checkbox' class='inputCheckbox' id='checkboxUserSelect_"+i+"'"+"/></div>" 5 +"<div id='divUserTableTitle' class='fontNoneWeight'>"+ss[i]["user_name"]+"</div>" 6 +"<div id='divUserTableNum' class='fontNoneWeight'>"+ss[i]["studentorteacherid"]+"</div>" 7 +"<div id='divUserTablePwd' class='fontNoneWeight'>"+ss[i]["password"]+"</div>" 8 +"<div id='divUserTableWorkShop' class='fontNoneWeight'>"+ss[i]["workshop_name"]+"</div>" 9 +"<div id='divUserTableOpreation'><div id='divUserTableOpreationUpdate'><a id='aWorkShopTableOperationUpdate' target='right' href='__APP__/Admin/WorkShop/ShowUpdateWorkShopUser/user_id/"+ss[i]["userid"]+"'"+">修改</a></div></div>" 10 +"</div>"); 11 $("#divUserInfoList").append(infoList); 12 }
通过将获取的数据进行解析,然后进行字符串的拼接,最后将拼接的字符串显示到列表中,从而实现以无刷新的方式进行按条件查询后显示到页面,至此终于将第一个问题解决了!(说句实话,字符串拼接真的很恶心人!众位仁兄,若有好方法,请务必告知!)。
唉,由于分页无法解析,内心苦苦挣扎,经过激烈的思想斗争,终于狠下心来重新写一个分页吧。所以学习了一下EasyUI的pagination分页,确实功能强大,非常实用。
先插入一点题外话,说一下EasyUI的pagination分页的使用。在使用pagination分页时首先需要引入EasyUI的文件包,引入后需在页面引入jquery.easyui.min.js、themes/default/easyui.css、themes/icon.css这三个文件。这样页面才可以使用分页。分页的使用有两种加载方式,(1)class加载方式(2)js加载方式
class加载:
<div id="box" class="easyui-pagination" data-options="total:2000,pageSize:10" style="background:#efefef;border:1px solid #ccc;"> </div>
通过在div中添加class="easyui-pagination"就可以将分页加载进来,data-options="total:2000,pageSize:10,"是对分页列表中数据或操作的设置。
js加载:
$(function () { $('#box').pagination({ total : 5, pageSize : 1, pageNumber : 1, pageList : [1,2], //loading : true, buttons : [{ iconCls : 'icon-add', },'-',{ iconCls : 'icon-edit', }], //layout : ['first','prev','links','next','last'], //showPageList : false, //showRefresh : false, //beforePageText : '弟弟', //afterPageText : '有{pages}个', displayMsg : '从{from}到{to},有{total}人', onSelectPage : function (pageNumber, pageSize) { $('#box').pagination('loading'); $('#content').panel('refresh', 'user.php?page='+pageNumber+'&pagesize='+pageSize); setTimeout(function () { $('#box').pagination('loaded'); }, 1000); }, onBeforeRefresh : function (pageNumber, pageSize) { alert('刷新之前'); }, onRefresh : function (pageNumber, pageSize) { alert('刷新之后'); }, onChangePageSize : function (pageSize) { alert('每页显示的条数被改变!'); } }); $(document).click(function () { /* $('#box').pagination('refresh', { pageSize : 2, pageNumber : 2, }); */ $('#box').pagination('select', 2); }); });
通过在js文件中$("#id").pagination({});的方式将对应id的div设置成分页列表。说到这里,就无可避免的需要说一下pagination的属性列表:
其中,主要用的有total:数据的总条数,pageNumber:当前显示的页码数,pageSize:每页显示的数量,pageList:可让用户自己手动改变的每页显示的数量。有了这些足以做数据的分页了。
回归正题:现在需要将所需条件进行提交,然后获取数据,同时进行分页。话不多说,上代码。
1 $.ajax({ 2 type:"GET", 3 url:"__URL__/GetCountByClassify", 4 data:{con:condition}, 5 dataType:"json", 6 success:function(ss){ 7 var sum=ss[0]["count(*)"]; 8 $("#divUserListPaging").pagination({ 9 total:sum, 10 pageSize:10, 11 showPageList:false, 12 beforePageText:"第", 13 afterPageText:"共{pages}页", 14 pageNumber:pageNum, 15 onSelectPage: function ( pageNumber, pageSize) { 16 $(this).pagination('loading'); 17 newData(pageNumber,pageSize); 18 $(this).pagination('loaded'); 19 makePage(pageNumber); 20 } 21 }); 22 } 23 });
根据路径将条件传递到控制器的方法中,通过条件查询获取查询结果,然后获取查询结果的总数量,回调分页函数,根据当前的显示页码和显示数量,进行数据分页。(解决第二个问题,用EasyUI解决了分页的问题)。
苦思了几天,终于将这个问题解决,不知道这是不是最好的解决办法,若各位大神有更好地方法,烦请告知!感激不尽啊!