项目采用前端easyui+后端handler方式,一个老套的组合,比较适合当前的团队。
项目中有大量场景是做数据展示,主要是收集表单上的参数,统一提交到后端进行sql语句的拼装然后json序列化到前端grid控件上。
为减少前后端代码量,约定好前端和后端字段保持一致,前端封装一个js函数负责收集参数提交到后端,后端动态解析转换为sql语句where部分。
//获取容器的键值对
function getParams(elem) {
var params = {};
$(elem).find("*").each(function () {
if ($(this).attr("name")) {
var key = $(this).attr("name");
var value = "";
if ($(this).val()) {
value = $(this).val();
} else {
value = $(this).text()
}
if (value != "") {
params[key] = value;
}
}
});
return params;
}
//将键值对组装为URL参数格式
var parseParam = function (param, key) {
var paramStr = "";
if (param instanceof String || param instanceof Number || param instanceof Boolean) {
paramStr += "&" + key + "='" + encodeURIComponent(param) + "'";
} else {
$.each(param, function (i) {
var k = key == null ? i : key + (param instanceof Array ? "[" + i + "]" : "." + i);
paramStr += '&' + parseParam(this, k);
});
}
return paramStr.substr(1);
};
js提交的时候只需要传入参数的容器即可。
function search() {
var params = getParams("#customtb");//收集容器里查询条件
$('#myGrid').datagrid('load', { 't': 'search', keyWord: parseParam(params) });
}
后端解析,如果不涉及条件的特殊处理,后端得到参数直接替换&为and即可,因项目中有时间字段,做了特殊处理。
public static string TranlateUrl2QueryString(string strParams)
{
string sql = "";
if (!string.IsNullOrWhiteSpace(strParams))
{
string[] arrParams = strParams.Split('&'); //dtStart='2016-05-04'
List<string> list = new List<string>();
foreach (string s in arrParams)
{
if (s.ToLower().StartsWith("dtstart"))//时间的特殊处理
{
string[] keyPairs = s.Split('=');
string sqlKeyPairs = string.Format(" MODIFYON > to_date({0}, 'yyyy-MM-dd') ", keyPairs[1]);
list.Add(sqlKeyPairs); //sqlWhere += sqlKeyPairs;
}
else if (s.ToLower().StartsWith("dtend"))
{
string[] keyPairs = s.Split('=');
string sqlKeyPairs = string.Format(" MODIFYON < to_date({0}, 'yyyy-MM-dd') ", keyPairs[1]);
list.Add(sqlKeyPairs);
}
else
{
list.Add(s);
}
}
sql = Utils.URLDecode(" where " + string.Join(" and ", list));
}
return sql;
}