锁定老帖子 主题:给flexigrid扩展两项功能
精华帖 (0) :: 良好帖 (3) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2010-09-05
最后修改:2010-09-11
第一次发贴,有如不妥,欢迎交流,砖请轻拍
本文将讲述一点我本人对flexigrid的一些增加功能。由于本人js水平有限,对其中的js扩展的代码写得比较对不起广大观众,还望各位大虾帮忙指正一下,呵呵。
在最近的一个项目中,需要用到列表展现一些数据的需求。考虑到如果自己开发,则工作量会很大,而且稳定性将成问题,而且在项目期限的要求下,这是不可行的。为此,我只能在google上百度一下相关的列表开源项目了。
在精心挑选与对比之后,我还是选择了flexigrid,原因主要是:我们项目中的js框架就是JQuery,flexigrid就是JQuery插件,而且它是开源共享的。其次就是它的界面与功能就是我想要的那样。
但在使用的过程中发现了原版flexigrid中的一些bug,如:不支持JQuery1.3及以上高版本的JQuery、获取数据错误之后会死循环,等等。本着我不是第一个吃螃蟹的人的信念,我又在网上搜索这些问题的解决方案,终于,让我找到了一个比较完善的解决方式:http://www.cnblogs.com/xuanye/archive/2009/11/08/Xuanye_jQuery_FlexiGrid_Demo.html。 在这篇文章中,这位人才兄将我想要的功能与bug全部解决了!解决了我一大心头之患。
但随着项目的进展、需求的“变态”,慢慢地,我发现这样的改变之后,还是不能满足我的要求了:
首先,原来的flexigrid中的查询方式都是模糊搜索,这当然不能满足需求!需求中要求对于一些编号类或参数类的搜索是精确查询!于是得改呀~ 为了实现它的精确搜索,我将flexigrid中增加了一个属性qstyle,同时在界面中增加一个复选框,让用户决定是否采取精确查询。主要代码片段如下: 增加属性 qstyle: '',//查询匹配的方式,0:精确;1:模糊 增加代码赋值 var param = [ { name: 'page', value: p.newp } , { name: 'rp', value: p.rp } , { name: 'sortname', value: p.sortname } , { name: 'sortorder', value: p.sortorder } , { name: 'query', value: p.query } , { name: 'qtype', value: p.qtype } , { name: 'qstyle', value: p.qstyle } …… p.qstyle=$('input[name=qstyle]', g.sDiv).val(); …… $(g.sDiv).append("<div class='sDiv2'>"+p.findText+"<input type='text' size='30' id='q' name='q' class='qsbox' /> " + assistWidget + " <select name='qtype' onchange='showRightWidget(this)'>" + sopt + "</select> <input type='checkbox' id='qstyle' name='qstyle' value='1'><input type='button' name='submitBtn' value='"+p.submitText+"'></div>"); $('input[name=q],select[name=qtype]', g.sDiv).keydown(function(e) { if (e.keyCode == 13) g.doSearch(); });
但是,很快,需求又有新的要求:时间查询应该用户选择时间,并按范围搜索! 于是,最后一段代码就被我扩展为: //下面有一个叫“qstyle”的隐藏控件,它是匹配方式:0:精确;1:模糊;2:范围 $(g.sDiv).append("<div class='sDiv2'>"+p.findText+"<input type='text' size='30' id='q' name='q' class='qsbox' /> " + assistWidget + " <select name='qtype' onchange='showRightWidget(this)'>" + sopt + "</select> <input type='hidden' id='qstyle' name='qstyle' value='1'><input type='button' name='submitBtn' value='"+p.submitText+"'></div>"); $('input[name=q],select[name=qtype]', g.sDiv).keydown(function(e) { if (e.keyCode == 13) g.doSearch(); }); 范围搜索的前期准备是搞定了,那用户如果进行选择呢?还有,在需求的后期,又要求对性别等参数性的查询应该用下拉框选择,这又如何做呢?我们来一一解决它们:
首先解决日期选择的问题。这个好办,只要实现两个输入框,并将两个输入框的onclick事件中调用日期控制即可。在这里,我使用的是date_picker日期控件(官方网址:www.my97.net)。
其次,我们再看一下下拉框选择的问题。这个问题要解决的主要是下拉框中的数据绑定。这里我在flexigrid中增加了一些代码用于绑定用户自己的数据(由于本人js代码水平有限,所以直接在flexigrid中增加自定义方法的方式): $.ajax({ type: p.method, url: p.url, data: param, dataType: p.dataType, // 注意下面这行的最后 success: function(data) { if (data != null && data.error != null) { if (p.onError) { p.onError(data); g.hideLoading(); } } else { g.addData(data); selData = data.selData;} }, error: function(data) { try { if (p.onError) { p.onError(data); } else { alert("获取数据发生异常!") } g.hideLoading(); } catch (e) { } } }); …… //add search button if (p.searchitems) { $('.pDiv2', g.pDiv).prepend("<div class='pGroup'> <div class='pSearch pButton' onclick='initSearchItems()'><span></span></div> </div> <div class='btnseparator'></div>"); $('.pSearch', g.pDiv).click(function() { $(g.sDiv).slideToggle('fast', function() { $('.sDiv:visible input:first', g.gDiv).trigger('focus'); }); }); //add search box g.sDiv.className = 'sDiv'; sitems = p.searchitems; var sopt = ""; var valueName = ""; for (var s = 0; s < sitems.length; s++) { if (p.qtype == '' && sitems[s].isdefault == true) { p.qtype = sitems[s].name; sel = 'selected="selected"'; } else{ sel = ''; } valueName = sitems[s].name + "$"; //加上数据源。如果数据源已经存在,则日历控件就不存在。 if(sitems[s].data){ valueName += sitems[s].data; } valueName += "$"; //加上时间控件的值 if(sitems[s].calender){ valueName += "1"; } sopt += "<option value='" + valueName + "' " + sel + " >" + sitems[s].display + " </option>"; } if (p.qtype == '') p.qtype = sitems[0].name; //用于辅助显示不同方式的查询的控件,如时间选择、下拉框等。 var assistWidget = "<input type='text' size='20' id='q_tmp_ipt1' name='q_tmp_ipt1' class='Wdate' onClick=\"WdatePicker({maxDate:'#F{$dp.$D(\\'q_tmp_ipt2\\')}',onpicked:setCalenderValue2Q})\" readonly='readonly' />"; assistWidget += "<span id='q_tmp_operT'> ~ </span>"; assistWidget += "<input type='text' size='20' id='q_tmp_ipt2' name='q_tmp_ipt2' class='Wdate' onClick=\"WdatePicker({minDate:'#F{$dp.$D(\\'q_tmp_ipt1\\')}',onpicked:setCalenderValue2Q})\" readonly='readonly' />"; //下拉框 assistWidget += " <select id='q_tmp_sel' name='q_tmp_sel' onchange='setSelValue2Q(this)'></select>"; //下面有一个叫“qstyle”的隐藏控件,它是匹配方式:0:精确;1:模糊;2:范围 $(g.sDiv).append("<div class='sDiv2'>"+p.findText+"<input type='text' size='30' id='q' name='q' class='qsbox' /> " + assistWidget + " <select name='qtype' onchange='showRightWidget(this)'>" + sopt + "</select> <input type='hidden' id='qstyle' name='qstyle' value='1'><input type='button' name='submitBtn' value='"+p.submitText+"'></div>"); $('input[name=q],select[name=qtype]', g.sDiv).keydown(function(e) { if (e.keyCode == 13) g.doSearch(); }); $('input[name=submitBtn]', g.sDiv).click(function() { g.doSearch(); }); $(g.bDiv).after(g.sDiv); } …… //在整个flexigrid.js文件的最后增加下面代码 var selData="";//这里存放下拉框选择的数据。格式为:{"dataName:status","1:启用","0:禁用"}//前面数据是固定的 /** * 根据出现的结果,显示合适的控件进行查询操作。并且,如果下拉框出现,则将下拉框中的内容填充。 * 另外,如果出现了下拉框的形式,则模糊查询的值应该为“精确”。如果出现的是输入框,则输入框中的值默认是空。 * @param selObj 查询字段对应的控件 * @return */ function showRightWidget(selObj){ if(selObj && selObj.value){ var value = selObj.value; var nameAndData=value.split("$"); var dataName = ""; var isCalender = false; if(nameAndData.length == 3){ if(nameAndData[1]){dataName = nameAndData[1];} if(nameAndData[2]){isCalender = true;} } if(!selData){ dataName = ""; } if(dataName){ var data = selData[dataName]; if(!data){ return;//if have not data,do nothing } var selectObj = document.getElementById("q_tmp_sel"); //add options to select selectObj.options.add(new Option("全部", "")); // 清空下拉框,只留"请选择"的选项 selectObj.length = 1; // 给清空后的下拉框构造内容 for(var key in data){ selectObj.options.add(new Option(data[key], key)); } setSelShow(); }else if(isCalender){ setCalenderShow(); }else{ setInputShow(); } } } /** * 将下拉选择框中的内容加入到查询框中。 * @param selObj * @return */ function setSelValue2Q(selObj){ if(selObj){ document.getElementById("q").value = selObj.value; } if(selObj.value == 'undefined'){ document.getElementById("q").value = ""; } } /** * 将选择的时间范围的值加入到查询框中。<br> * 如果查询的范围两个框都为空,则将查询框中的内容清除。 * @return */ function setCalenderValue2Q(){ var input1 = document.getElementById("q_tmp_ipt1"); var input2 = document.getElementById("q_tmp_ipt2"); if(input1 && input2){ var inputQ = document.getElementById("q"); if(input1.value || input2.value){ //至少有一个有值时,才将这两个值赋值给查询框。 inputQ.value = input1.value + "~" + input2.value; }else{ //如果都没有值的情况下,则将查询框中的值清空! inputQ.value = ""; } } } /** * 初始化查询的方式,如出现输入框或是下拉框等。 * @return */ function initSearchItems(){ var temp=document.getElementById("qtype"); if(temp){ showRightWidget(temp); } } /** * 设置下拉选择框可见。除了下拉选择框,其余都不可见。<br> * 1、将下拉框显示出来,并将其它的控件隐藏。 * 2、将匹配模式改为精确匹配。 * 3、下拉框中的值不在这里构造 * * @return */ function setSelShow(){ //显示下拉框,并设置匹配模式为“精确” document.getElementById("q_tmp_sel").style.display = ""; document.getElementById("qstyle").value='0';//set value exact! //隐藏输入框、两个时间选择框 document.getElementById("q").style.display = 'none'; document.getElementById("q_tmp_ipt1").style.display = 'none'; document.getElementById("q_tmp_operT").style.display = 'none'; document.getElementById("q_tmp_ipt2").style.display = 'none'; //设置输入框的值为空。 document.getElementById("q").value = ""; } /** * 设置时间选择查询可见。<br> * 1、将时间选择框显示出来,并将其它的控件隐藏。 * 2、将匹配模式改为范围匹配。 * @return */ function setCalenderShow(){ //设置时间选择框可见,并设置匹配模式为“范围” document.getElementById("q_tmp_ipt1").style.display = ''; document.getElementById("q_tmp_operT").style.display = ''; document.getElementById("q_tmp_ipt2").style.display = ''; document.getElementById("qstyle").value='2';//set value range! //将输入框、下拉框隐藏 document.getElementById("q").style.display = 'none'; document.getElementById("q_tmp_sel").style.display = "none"; //设置输入框的值为空。 document.getElementById("q").value = ""; } /** * 设置输入查询为可见。<br> * 1、将输入框显示出来,并将其它的控件隐藏。 * 2、将匹配模式改为模糊匹配。 * @return */ function setInputShow(){ //设置输入框的值为空。 document.getElementById("q").value = ""; //将输入框设置为可见,并将匹配模式改为“模糊” document.getElementById("q").style.display = ''; document.getElementById("qstyle").value='1';//set value fuzzy! //将时间选择框、下拉框都隐藏 document.getElementById("q_tmp_ipt1").style.display = 'none'; document.getElementById("q_tmp_operT").style.display = 'none'; document.getElementById("q_tmp_ipt2").style.display = 'none'; document.getElementById("q_tmp_sel").style.display = "none"; } 以上各更改在页面上的使用如下所示(详细代码可以参考附件,另,附件中没有提供提交到服务器上对数据的处理过程): <script type="text/javascript"> // 各种属性解释:都在 flexgrid.js里 $("#table_list").flexigrid ( { url: "/cloudList.do?method=customer&status=${status}&parentId=${parentId}", dataType: 'json', resizable: false, colModel : [ {display: '序号', name : 'sid', width : 30, sortable : false, align: 'center'}, {display: '客户编号', name : 'id', width : 80, sortable : true, align: 'left', hide: true}, {display: '卡号', name : 'baseInfo.cardNumber', width : 100, sortable : true, align: 'left'}, {display: '姓名', name : 'name', width : 100, sortable : true, align: 'left'}, {display: '性别', name : 'sex', width : 30, sortable : true, align: 'left'}, {display: '与客户关系', name : 'relationToPrimary', width : 30, sortable : false, align: 'left'<c:if test="${empty parentId}">,hide:true</c:if>}, {display: '余额', name : 'accountBalance', width : 30, sortable : true, align: 'left',process: getBalance<c:if test="${!empty parentId}">,hide:true</c:if>}, {display: '开卡店址', name : 'shopOfDeposit.name', width : 200, sortable : true, align: 'left'}, {display: '注册时间', name : 'modifyTime', width : 120, sortable : true, align: 'left', hide: true}, {display: '操作', name : '_oper_', width : 140, sortable : false, align: 'center',process: getOper} ], buttons : [ {name:'add', displayname: '添加新客户<c:if test="${!empty parentId}">家属</c:if>', bclass:'addBtn', onpress : addCus}, {separator: true} ], searchitems : [ {display: '卡号', name : 'baseInfo.cardNumber', isdefault: true}, {display: '姓名', name : 'name'}, {display: '性别', name : 'sex', data : 'sexes'}, {display: '状态', name : 'status', data : 'status'}, {display: '状态', name : 'modifyTime', isCalender:true} ], sortname: "modifyTime", sortorder: "desc", usepager: true, title: '客户<c:if test="${!empty parentId}">家属</c:if>列表', useRp: true, rp: 10, showTableToggleBtn: true, width: 'auto', height: 400 } ); function getBalance(thDiv,id){ var result=""; if(!thDiv){ return result; } var links=thDiv.split(";"); if(links.length==2){ result="<a href='"+links[0]+"' class='operCol'>"+links[1]+"</a>"; } return result; } function getOper(thDiv,id){ var result=""; if(!thDiv){ return result; } var links=thDiv.split(";"); if(links.length==3){ result="<a href='"+links[0]+"' class='operCol'>修改</a> <a href='"+links[1]+"' class='operCol'>查看更多</a>"; if(links[2]){ result+=" <a href='"+links[2]+"' class='operCol'>消费记录</a>"; } } return result; } function addCus(com, grid) { <c:if test="${empty parentId}">window.location.href = "/customer/base";</c:if> <c:if test="${!empty parentId}">window.location.href = "/customer/${parentId}/sub/base";</c:if> } function getCustomers(com,grid){ var link="cloudList.do?method=customer&parentId=${parentId}&status="; if(com=='active'){ link+="1"; } else if(com=='inactive'){ link+="0"; } window.location.href = link; } </script>
声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2010-09-07
不错!
建议把增强的部分发给作者 希望越来越多中国人能参与开源 |
|
返回顶楼 | |
发表时间:2010-09-08
我觉得你这样的需求,把查询设置在外面不是更好吗,何必要调整快速查询呢。
|
|
返回顶楼 | |
发表时间:2010-09-08
xuanye 写道 我觉得你这样的需求,把查询设置在外面不是更好吗,何必要调整快速查询呢。
没太明白你的意思,什么叫查询设置在外面? 如果你的意思是另外再写一个查询入口(比如查询输入与按钮),那代价会更大的,因为这是一个异步提交,它的传参在代码中指定好了,我现在做的只是把传递的参数做一些格式化,然后提交到后台去做相应的处理~ 如果写在外面,传参与回显都比较麻烦的。 但愿我没理解错你的意思,呵呵。 |
|
返回顶楼 | |
发表时间:2011-03-06
正在学习这方面东西,想做一个里面可以多条件查询功能,楼主可以给全一点的代码么,谢谢
|
|
返回顶楼 | |
发表时间:2011-03-14
淅淅沥沥 写道 正在学习这方面东西,想做一个里面可以多条件查询功能,楼主可以给全一点的代码么,谢谢
所有的代码,包括示例,都在附件中可以下载的哦,呵呵。 另外,我的js水平也是很菜的,我能改的目前也就这些了,如果楼上感兴趣的话,可以看看,如果有什么新的想法和改进,还望多多交流哦,嘻嘻 |
|
返回顶楼 | |
发表时间:2011-03-16
淅淅沥沥 写道 正在学习这方面东西,想做一个里面可以多条件查询功能,楼主可以给全一点的代码么,谢谢
这个附件里面就有条件查询,你可以下来看看 http://dl.iteye.com/topics/download/36c8734f-4fa1-3726-88fd-4ca20b081ab3 jQuery插件flexigrid使用总结 |
|
返回顶楼 | |
浏览 8566 次