- 浏览: 146061 次
- 性别:
- 来自: 南京
文章分类
最新评论
-
chenyanxuan:
假如每个敏感词的开头都不一样,那么,DFA算法是不是只剩下弊端 ...
敏感词过滤算法实现 -
zhoupan301415:
写的非常不错,虽然代码量,但是考虑的还是很周全的,灵活性,扩展 ...
基于java反射的验证框架 -
phoenixcwx:
新入行菜鸟感谢分享,学到不少东西,顺便问一句,Java中使 ...
Java防反编译技术实现探讨 -
hellohank:
燃木刀法 写道楼主,怎么实现替换功能呀 调用KWSeeker. ...
敏感词过滤算法实现 -
燃木刀法:
楼主,怎么实现替换功能呀
敏感词过滤算法实现
第一次发贴,有如不妥,欢迎交流,砖请轻拍
本文将讲述一点我本人对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>
- flexigrid.rar (66.1 KB)
- 下载次数: 897
评论
这个附件里面就有条件查询,你可以下来看看
http://dl.iteye.com/topics/download/36c8734f-4fa1-3726-88fd-4ca20b081ab3
jQuery插件flexigrid使用总结
所有的代码,包括示例,都在附件中可以下载的哦,呵呵。
另外,我的js水平也是很菜的,我能改的目前也就这些了,如果楼上感兴趣的话,可以看看,如果有什么新的想法和改进,还望多多交流哦,嘻嘻
没太明白你的意思,什么叫查询设置在外面?
如果你的意思是另外再写一个查询入口(比如查询输入与按钮),那代价会更大的,因为这是一个异步提交,它的传参在代码中指定好了,我现在做的只是把传递的参数做一些格式化,然后提交到后台去做相应的处理~
如果写在外面,传参与回显都比较麻烦的。
但愿我没理解错你的意思,呵呵。
建议把增强的部分发给作者
希望越来越多中国人能参与开源
相关推荐
Flexigrid是一款基于jQuery的强大的表格插件,它提供了丰富的功能和灵活的配置选项,使得在Web应用中创建和管理表格变得更为简单。在“flexigrid表格功能丰富”这一主题下,我们可以深入探讨Flexigrid的核心特性以及...
7. **插件兼容**:Flexigrid.js可以与其他JavaScript库如jQuery无缝集成,进一步扩展其功能。 8. **性能优化**:尽管Flexigrid.js提供了很多特性,但它的体积相对较小,加载速度快,对页面性能的影响较小。 9. **...
Flexigrid是一款基于jQuery的网格视图插件,它提供了类似于ASP.NET GridView的功能,具有强大的数据展示和操作能力。在"(转)基于jQuery的GridView-Flexigrid(2)-扩展和修复"这篇博文中,作者可能详细介绍了如何利用...
例如,`$.fn.flexigrid`是初始化Flexigrid表格的主要函数,通过传递一个包含配置项的对象参数来定制功能。如`url`用于指定数据来源,`colModel`定义列的属性,包括列名、宽度、是否可排序等。 在实际应用中,...
10. **插件扩展**:Flexigrid社区提供了许多插件和扩展,如搜索、导出数据等功能,进一步增强了其功能性和实用性。 综上所述,Flexigrid作为一个优秀的表格插件,通过其丰富的特性,为Web开发人员提供了创建高度可...
FlexiGrid是一款基于JQuery的表格插件,用于在网页中展示数据,具有分页、排序、筛选等功能,常用于后台管理系统中数据的展示。它提供了丰富的配置选项和灵活的扩展性,使得开发者可以根据需求定制表格的行为和样式...
Flexigrid是一款基于jQuery的轻量级数据网格插件,专为实现强大的表格展示和操作功能而设计。在Web开发中,特别是在构建数据密集型应用时,它提供了一种高效且用户友好的方式来显示、排序、筛选和操作数据。这款插件...
这个插件的主要特点是灵活性、可扩展性和易用性,使得开发者能够轻松地创建功能完备的数据展示界面。下面我们将深入探讨Flexigrid的关键特性、使用方法以及与其他jQuery表格插件的比较。 1. **主要特性** - 分页:...
- **插件支持**:FlexiGrid允许扩展使用第三方插件,增强其功能,如导出数据为CSV或Excel格式。 - **性能优化**:对于大数据量的场景,可以使用服务器端分页和虚拟滚动技术来提高性能。 - **自定义主题**:通过...
源码的阅读可以帮助开发者理解如何实现这些新功能,以便于在未来自己的项目中进行定制和扩展。同时,如果有详细的文档,将有助于快速上手和解决遇到的问题。 总的来说,"Flexigrid 重写版"在保持原有功能的基础上,...
在“flexigrid.js”和“flexigrid.css”这两个核心文件中,JavaScript文件主要负责实现数据的动态加载和交互功能,而CSS文件则用于定义插件的样式,以确保其在页面上的美观呈现。 `jquery+flexigrid使用方法.doc`...
Flexigrid demo
使用JavaScript来初始化Flexigrid,设置其配置项,例如分页、列定义等。例如: ```javascript $("#flex1").flexigrid({ url: 'server.php', // 数据来源 colModel: [ // 列定义 {display: 'ID', name: 'id', ...
6. **功能扩展**:Flexigrid提供了丰富的功能,如分页、排序、搜索、行选择等。开发者可以通过配置参数开启或关闭这些功能,也可以通过插件的API实现更复杂的行为,如自定义按钮、动态添加或删除行等。 7. **响应式...
4. **功能扩展** - **分页**:Flexigrid内置了分页功能,只需配置`pager`参数并返回正确的数据总条数即可。 - **排序**:通过设置`sortname`和`sortorder`,用户可以对表格进行排序。点击列头会自动触发排序。 - ...
1. 插件扩展:Flexigrid具有良好的扩展性,开发者可以编写自定义插件来增强其功能,如导出表格数据、导入Excel等。 2. 性能优化:对于大数据量的场景,可以通过分页、延迟加载等策略减轻前端负担,提升用户体验。 ...
Flexigrid是一款强大的JavaScript数据网格插件,它以其灵活性、可定制性和丰富的功能在Web开发领域受到了广泛的关注。这款工具主要用于处理大量的数据展示,提供了分页、排序、搜索和自定义列等功能,使得前端开发者...
《修改jQuery表格插件flexigrid源码添加自定义功能》文章配套代码http://blog.csdn.net/neareast/article/details/12904393,对jquery表格插件flexigrid的源码进行修改,增加了几个自定义功能,对其功能进行了增强。...
5. **可扩展**:Flexigrid的API允许开发者添加自定义功能,如按钮、链接或复杂的操作。 6. **AJAX支持**:通过AJAX技术动态加载数据,提高用户体验,避免了页面刷新导致的数据丢失。 7. **响应式设计**:随着设备...
- 功能扩展:通过修改源码,可以添加新的功能,例如集成图表、拖放排序等。 - 主题定制:可以调整CSS样式,为Flexigrid创建独特的视觉效果。 - API接口:了解API接口,以便在其他JavaScript代码中调用和控制...