给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>