`
hellohank
  • 浏览: 146061 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

给flexigrid扩展两项功能

阅读更多

第一次发贴,有如不妥,欢迎交流,砖请轻拍

 

本文将讲述一点我本人对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 + "&nbsp;&nbsp;</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>

 

分享到:
评论
7 楼 346749844 2013-05-19  
楼主还有附件呢?楼主html中的男/女,如果在数据库中是int类型,怎么在前端显示男/女呢?我又如何做个下拉框查询所有性别为男的数据?
6 楼 matychen 2011-03-16  
淅淅沥沥 写道
正在学习这方面东西,想做一个里面可以多条件查询功能,楼主可以给全一点的代码么,谢谢


这个附件里面就有条件查询,你可以下来看看
http://dl.iteye.com/topics/download/36c8734f-4fa1-3726-88fd-4ca20b081ab3
jQuery插件flexigrid使用总结
5 楼 hellohank 2011-03-14  
淅淅沥沥 写道
正在学习这方面东西,想做一个里面可以多条件查询功能,楼主可以给全一点的代码么,谢谢

所有的代码,包括示例,都在附件中可以下载的哦,呵呵。
另外,我的js水平也是很菜的,我能改的目前也就这些了,如果楼上感兴趣的话,可以看看,如果有什么新的想法和改进,还望多多交流哦,嘻嘻
4 楼 淅淅沥沥 2011-03-06  
正在学习这方面东西,想做一个里面可以多条件查询功能,楼主可以给全一点的代码么,谢谢
3 楼 hellohank 2010-09-08  
xuanye 写道
我觉得你这样的需求,把查询设置在外面不是更好吗,何必要调整快速查询呢。

没太明白你的意思,什么叫查询设置在外面?

如果你的意思是另外再写一个查询入口(比如查询输入与按钮),那代价会更大的,因为这是一个异步提交,它的传参在代码中指定好了,我现在做的只是把传递的参数做一些格式化,然后提交到后台去做相应的处理~

如果写在外面,传参与回显都比较麻烦的。

但愿我没理解错你的意思,呵呵。
2 楼 xuanye 2010-09-08  
我觉得你这样的需求,把查询设置在外面不是更好吗,何必要调整快速查询呢。
1 楼 leopku 2010-09-07  
不错!
建议把增强的部分发给作者
希望越来越多中国人能参与开源

相关推荐

    flexigrid表格功能丰富

    Flexigrid是一款基于jQuery的强大的表格插件,它提供了丰富的功能和灵活的配置选项,使得在Web应用中创建和管理表格变得更为简单。在“flexigrid表格功能丰富”这一主题下,我们可以深入探讨Flexigrid的核心特性以及...

    flexigrid.js flexigrid.js flexigrid.js

    7. **插件兼容**:Flexigrid.js可以与其他JavaScript库如jQuery无缝集成,进一步扩展其功能。 8. **性能优化**:尽管Flexigrid.js提供了很多特性,但它的体积相对较小,加载速度快,对页面性能的影响较小。 9. **...

    (转)基于jQuery的GridView-Flexigrid(2)-扩展和修复

    Flexigrid是一款基于jQuery的网格视图插件,它提供了类似于ASP.NET GridView的功能,具有强大的数据展示和操作能力。在"(转)基于jQuery的GridView-Flexigrid(2)-扩展和修复"这篇博文中,作者可能详细介绍了如何利用...

    jquery flexigrid

    例如,`$.fn.flexigrid`是初始化Flexigrid表格的主要函数,通过传递一个包含配置项的对象参数来定制功能。如`url`用于指定数据来源,`colModel`定义列的属性,包括列名、宽度、是否可排序等。 在实际应用中,...

    Flexigrid-master表格插件

    10. **插件扩展**:Flexigrid社区提供了许多插件和扩展,如搜索、导出数据等功能,进一步增强了其功能性和实用性。 综上所述,Flexigrid作为一个优秀的表格插件,通过其丰富的特性,为Web开发人员提供了创建高度可...

    FlexiGrid配置与使用

    FlexiGrid是一款基于JQuery的表格插件,用于在网页中展示数据,具有分页、排序、筛选等功能,常用于后台管理系统中数据的展示。它提供了丰富的配置选项和灵活的扩展性,使得开发者可以根据需求定制表格的行为和样式...

    jquery插件之flexigrid篇

    Flexigrid是一款基于jQuery的轻量级数据网格插件,专为实现强大的表格展示和操作功能而设计。在Web开发中,特别是在构建数据密集型应用时,它提供了一种高效且用户友好的方式来显示、排序、筛选和操作数据。这款插件...

    Flexigrid-插件

    这个插件的主要特点是灵活性、可扩展性和易用性,使得开发者能够轻松地创建功能完备的数据展示界面。下面我们将深入探讨Flexigrid的关键特性、使用方法以及与其他jQuery表格插件的比较。 1. **主要特性** - 分页:...

    FlexiGrid(js版本)

    - **插件支持**:FlexiGrid允许扩展使用第三方插件,增强其功能,如导出数据为CSV或Excel格式。 - **性能优化**:对于大数据量的场景,可以使用服务器端分页和虚拟滚动技术来提高性能。 - **自定义主题**:通过...

    flexigrid 重写版

    源码的阅读可以帮助开发者理解如何实现这些新功能,以便于在未来自己的项目中进行定制和扩展。同时,如果有详细的文档,将有助于快速上手和解决遇到的问题。 总的来说,"Flexigrid 重写版"在保持原有功能的基础上,...

    flexigrid相关

    在“flexigrid.js”和“flexigrid.css”这两个核心文件中,JavaScript文件主要负责实现数据的动态加载和交互功能,而CSS文件则用于定义插件的样式,以确保其在页面上的美观呈现。 `jquery+flexigrid使用方法.doc`...

    Flexigrid demo

    Flexigrid demo

    flexigrid使用实例

    使用JavaScript来初始化Flexigrid,设置其配置项,例如分页、列定义等。例如: ```javascript $("#flex1").flexigrid({ url: 'server.php', // 数据来源 colModel: [ // 列定义 {display: 'ID', name: 'id', ...

    jquery表格插件Flexigrid

    6. **功能扩展**:Flexigrid提供了丰富的功能,如分页、排序、搜索、行选择等。开发者可以通过配置参数开启或关闭这些功能,也可以通过插件的API实现更复杂的行为,如自定义按钮、动态添加或删除行等。 7. **响应式...

    Flexigrid使用实例

    4. **功能扩展** - **分页**:Flexigrid内置了分页功能,只需配置`pager`参数并返回正确的数据总条数即可。 - **排序**:通过设置`sortname`和`sortorder`,用户可以对表格进行排序。点击列头会自动触发排序。 - ...

    flexigrid,数据显示控件

    1. 插件扩展:Flexigrid具有良好的扩展性,开发者可以编写自定义插件来增强其功能,如导出表格数据、导入Excel等。 2. 性能优化:对于大数据量的场景,可以通过分页、延迟加载等策略减轻前端负担,提升用户体验。 ...

    flexigrid 深入

    Flexigrid是一款强大的JavaScript数据网格插件,它以其灵活性、可定制性和丰富的功能在Web开发领域受到了广泛的关注。这款工具主要用于处理大量的数据展示,提供了分页、排序、搜索和自定义列等功能,使得前端开发者...

    增强版的flexigrid源码

    《修改jQuery表格插件flexigrid源码添加自定义功能》文章配套代码http://blog.csdn.net/neareast/article/details/12904393,对jquery表格插件flexigrid的源码进行修改,增加了几个自定义功能,对其功能进行了增强。...

    flexigrid表格插件

    5. **可扩展**:Flexigrid的API允许开发者添加自定义功能,如按钮、链接或复杂的操作。 6. **AJAX支持**:通过AJAX技术动态加载数据,提高用户体验,避免了页面刷新导致的数据丢失。 7. **响应式设计**:随着设备...

    含源代码的flexigrid JS grid控件

    - 功能扩展:通过修改源码,可以添加新的功能,例如集成图表、拖放排序等。 - 主题定制:可以调整CSS样式,为Flexigrid创建独特的视觉效果。 - API接口:了解API接口,以便在其他JavaScript代码中调用和控制...

Global site tag (gtag.js) - Google Analytics