给flexigrid扩展两项功能

第一次发贴，有如不妥，欢迎交流，砖请轻拍<img src="/images/smiles/icon_biggrin.gif" alt="">
 
本文将讲述一点我本人对flexigrid的一些增加功能。由于本人js水平有限，对其中的js扩展的代码写得比较对不起广大观众，还望各位大虾帮忙指正一下，呵呵。
 
在最近的一个项目中，需要用到列表展现一些数据的需求。考虑到如果自己开发，则工作量会很大，而且稳定性将成问题，而且在项目期限的要求下，这是不可行的。为此，我只能在google上百度一下相关的列表开源项目了<img src="/images/smiles/icon_wink.gif" alt="">。
 
在精心挑选与对比之后，我还是选择了flexigrid，原因主要是：我们项目中的js框架就是jquery，flexigrid就是jquery插件，而且它是开源共享的。其次就是它的界面与功能就是我想要的那样。
 
但在使用的过程中发现了原版flexigrid中的一些bug，如：不支持jquery1.3及以上高版本的jquery、获取数据错误之后会死循环，等等。本着我不是第一个吃螃蟹的人的信念，我又在网上搜索这些问题的解决方案，终于，让我找到了一个比较完善的解决方式：[url=http://www.cnblogs.com/xuanye/archive/2009/11/08/xuanye_jquery_flexigrid_demo.html]http://www.cnblogs.com/xuanye/archive/2009/11/08/xuanye_jquery_flexigrid_demo.html[/url]。
在这篇文章中，这位人才兄将我想要的功能与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日期控件（官方网址：[url=http://www.my97.net]www.my97.net[/url]）。
 
其次，我们再看一下下拉框选择的问题。这个问题要解决的主要是下拉框中的数据绑定。这里我在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>