1、使用方法
//外部使用方法
$search.on('search'. function (event, conditions) {
$table.emapdatatable('reloadFirstPage', {querySetting: conditions});
})
//或者
$search.on('search'. function (event, conditions) {
$table.emapdatatable('reload', {querySetting: conditions});
})
2、实现方法
//内部封装的属性reloadFirstPage
/**
* @method reloadFirstPage
* @description 默认刷新表格回到首页
* @param {Object} params - 附带参数
* @param {Function} callback - 回调函数
*/
Plugin.prototype.reloadFirstPage = function(params, callback) {
this.reload($.extend({}, params, {
_gotoFirstPage: true
}), callback);
};
//reloadFirstPage调用reload
/**
* @method reload
* @description 刷新表格数据
* @param {Object} params - 附带参数
* @param {Object} params._gotoFirstPage -
* callback 可以是function 或者是 true，true的话意味着强制跳回第一页
* _gotoFirstPage 如果callback为回调函数，此时需要调回第一页 则可以设置params._gotoFirstPage为true
*
*/
Plugin.prototype.reload = function(params, callback) {
/**
* 方法内容
*/
if (!$.isEmptyObject(this.settings.defaultParams)) {
this.source.data = _getQuerySetting(this.settings.defaultParams);
}
var gotoFirstPage = false;
if (params) {
gotoFirstPage = params._gotoFirstPage;
gotoFirstPage && delete params._gotoFirstPage;
}
if (params) {
if (!$.isEmptyObject(this.settings.defaultParams)) {
try {
var query = JSON.parse(params.querySetting);
query.push.apply(query, JSON.parse(this.source.data.querySetting));
this.source.data.querySetting = JSON.stringify(query);
} catch (e) {
this.source.data = params;
}
} else {
this.source.data = params;
}
}
if (callback === true || gotoFirstPage === true) {
if (!this.$element.jqxDataTable('goToPage', 0)) {
this.$element.jqxDataTable('updateBoundData');
}
} else {
this.$element.jqxDataTable('updateBoundData');
}
var that = this;
if (typeof callback == 'function') {
var intervalId = setInterval(function() {
if (that.$element.jqxDataTable('isBindingCompleted')) {
clearInterval(intervalId);
// 将callback放在 refresh后面， 避免callback中的dom操作被refresh刷新掉 zhuhui 2016-10-21
that.$element.jqxDataTable('refresh');
callback();
}
}, 10);
}
};
3、querySetting的使用和构造
3.1 querySetting可以使用高级搜索框自动生成获取
- 参考emap中的数据格式，自定义手动构造searchModel
-
//手动构造: /** * 先构造searchModel * 再转换模型，给模型加上get方法 * searchData = WIS_EMAP_SERV.convertModel(searchModel,"search"); * 初始化高级搜索框，附带模型数据 * $("#search").emapAdvancedQuery({data: searchData}); * 绑定search点击事件 * $('#search').on('search', function(e, data, opts){ * // data 为序列化的搜索条件，即querySetting * //调用表格reload方法 * $("#datatable").emapdatatable('reload', {querySetting: data}); * }); */ var searchModel = { "name": "083a04b8-0439-4103-891d-aa7d7634d575", "id": "t_jzg_jbxx_select_condition", "xtype": "customSearcher", "appName": "应用1", "modelName": "模型1", "controls": [ { "name": "XM", "caption": "姓名", "dataType": "String", "defaultBuilder": "equal", "builderList": "cbl_String", "quickSearch": true, "xtype": "tree", "url": "http://res.wisedu.com/fe_components/mock/tree.json", "dataSize": 90 }, { "name": "NNQJ", "caption": "年龄区间", "dataType": "String", "defaultBuilder": "equal", "builderList": "cbl_String", "xtype": "number-range" }, { "name": "身高", "caption": "身高", "dataType": "String", "defaultBuilder": "equal", "builderList": "cbl_String", "xtype": "number" }, { "name": "XH", "caption": "学号", "dataType": "String", "defaultBuilder": "equal", "builderList": "cbl_String", "xtype": "date-local", "quickSearch": true, "url": "http://res.wisedu.com/fe_components/mock/button_group_options.json", "dataSize": 20 }, { "name": "XBDM", "caption": "性别", "dataType": "String", "defaultBuilder": "equal", "builderList": "cbl_List", "url": "http://res.wisedu.com/fe_components/mock/select.json", "xtype": "radiolist", "search.quickSearchXtype": "select", "dataSize": 1, "quickSearch": true }, { "name": "PYCCDM", "caption": "培养层次", "dataType": "String", "defaultBuilder": "equal", "builderList": "cbl_String", "url": "/code/9ec58134-0517-4664-8969-5342ffcaf190.do", "xtype": "date-local", "dataSize": 1 }, { "name": "DWDM", "caption": "院系", "dataType": "String", "defaultBuilder": "equal", "builderList": "cbl_String", "quickSearch": true, "url": "http://res.wisedu.com/fe_components/mock/button_group_options.json", "xtype": "multi-buttonlist", "dataSize": 10 }, { "name": "ZYDM", "caption": "专业", "dataType": "String", "defaultBuilder": "equal", "builderList": "cbl_String", "quickSearch": false, "url": "/code/94b15a8a-9b45-4455-b254-1ec2065028d9.do", "xtype": "select", "dataSize": 6 }, { "name": "BJDM", "caption": "班级", "dataType": "String", "defaultBuilder": "equal", "builderList": "cbl_String", "url": "/code/ab43d66a-9778-49b1-b3e0-0ce46317fed9.do", "xtype": "select", "dataSize": 100, "hidden": true }, { "name": "XZNJ", "caption": "现在年级", "dataType": "String", "defaultBuilder": "equal", "builderList": "cbl_String", "quickSearch": false, "xtype": "text", "dataSize": 10 }, { "name": "XQDM", "caption": "校区", "dataType": "String", "defaultBuilder": "equal", "builderList": "cbl_String", "quickSearch": false, "url": "/code/2eac9654-d335-4449-9ab0-42a32a3a0fda.do", "xtype": "select", "dataSize": 40 }, { "name": "SSQDM", "caption": "宿舍区", "dataType": "String", "defaultBuilder": "equal", "builderList": "cbl_String", "url": "/code/f4fbe313-bcf7-4599-90ff-f89db2716417.do", "xtype": "select", "dataSize": 40, "hidden": true }, { "name": "SSLDM", "caption": "宿舍楼", "dataType": "String", "defaultBuilder": "equal", "builderList": "cbl_String", "quickSearch": false, "url": "/code/c043b195-d8a2-498d-86b5-09e27da23b2d.do", "xtype": "select", "dataSize": 40 }, { "name": "FJH", "caption": "房间号", "dataType": "String", "defaultBuilder": "equal", "builderList": "cbl_String", "quickSearch": true, "xtype": "text", "dataSize": 40 }, { "name": "SFZJH", "caption": "身份证件号", "dataType": "String", "defaultBuilder": "equal", "builderList": "cbl_String", "quickSearch": true, "grid.hidden": true, "xtype": "text", "dataSize": 20 } ], "builderLists": { "cbl_String": [ { "name": "include", "caption": "包含" }, { "name": "equal", "caption": "等于" }, { "name": "notEqual", "caption": "不等于" }, { "name": "beginWith", "caption": "以..开始" }, { "name": "endWith", "caption": "以..结束" } ], "cbl_List": [ { "name": "equal", "caption": "等于" }, { "name": "notEqual", "caption": "不等于" } ], "cbl_upper_String": [ { "name": "upper_equal", "caption": "等于" }, { "name": "upper_notEqual", "caption": "不等于" }, { "name": "upper_include", "caption": "包含" }, { "name": "upper_notInclude", "caption": "不包含" }, { "name": "upper_beginWith", "caption": "以..开始" }, { "name": "upper_endWith", "caption": "以..结束" } ], "cbl_Other": [ { "name": "equal", "caption": "等于" }, { "name": "notEqual", "caption": "不等于" }, { "name": "more", "caption": "大于" }, { "name": "less", "caption": "小于" }, { "name": "moreEqual", "caption": "大于等于" }, { "name": "lessEqual", "caption": "小于等于" } ], "cbl_equal_List": [ { "name": "equal", "caption": "等于" } ] } }; searchData = WIS_EMAP_SERV.convertModel(searchData,"search"); $("#search").emapAdvancedQuery({ data: searchData }); $('#search').on('search', function(e, data, opts){ // data 为序列化的搜索条件 console.log(data); //调用表格reload方法 $("#datatable").emapdatatable('reload', {querySetting: data}); }); //其中e当前点击事件对象 //data为需要的querySetting条件 //opts为当前高级搜索中包含的一切相关参数 -
emap中模型配置获
//数据模型生成 //首先：获取高级搜索模型，searchModel var searchModel = WIS_EMAP_SERV.getModel('modules/editTable.do', 'T_PXXX_XSJBXX_QUERY', 'search') //其次，初始化高级搜索框： $('#advancedQueryPlaceholder').emapAdvancedQuery({data: searchData}); //最后绑定搜索触发事件 $('#advancedQueryPlaceholder').on('search', function(e, data, opts){ // data 为序列化的搜索条件 console.log(data); //调用表格reload方法 $("#retirementInfoTable").emapdatatable('reload', {querySetting: data}); }); //其中e当前点击事件对象 //data为需要的querySetting条件 //opts为当前高级搜索中包含的一切相关参数
高级搜索框自动生成querySetting，依据参数规则，从searchModel中拼接返回querySetting：
3.2 自定义构造querySetting，遵循querySetting的规则
//定义一个数组
var querySetting=[];
//querySetting数组中每一个元素为一个对象或一个数组
//最普通的情况是都是单个js对象：var obj ={};
//对象的格式为：
var obj={
"name":"XSBH",
"caption":"学号",
"value":"1",
"linkOpt":"AND",
"builder":"notEqual"
}
每一个对象代表一个附加sql搜索条件
如在sql中展示为：and (xsbh <>1)
(obj.name obj.builder obj.value obj.linkOpt )
(xsbh <> 1 and )
只有一个参数对象，1后面的and不展示
最后一个参数对象，1后面的and不展示
builder翻译过来可以为：<>,=,>,<,in,like,>=,<=,endWidth,beginWidth等等
linkOpt可以为 and or
//复杂情况：
querySetting数组里嵌套另外一个querySetting数组
同时包含单个对象，这样就形成了层次结构：
//整个querySetting
var querySetting=[
{"name":"XH","caption":"学 号","linkOpt":"AND","builderList":"cbl_String","builder":"equal","value":"123"},
{"name":"ZGH","value":"98010","linkOpt":"AND","builder":"equal"},
{"name":"ZGH1","value":"98010","linkOpt":"AND","builder":"equal"},
//另外一个querySetting
[{"caption":"审核状态","name":"SHZT","value":"0","builder":"notEqual","linkOpt":"AND"}]
]
//层次结构代表附加sql可以有层次，
//此处为and(xh=123 and zgh=98010 and zgh1=98010 and (shzt <> 0) )
括号里面有了另外一个括号
层次之间是and还是or连接，需要看每一个子层次第一个对象的linkOpt,第一个是or则子层次之间用or连接，第一个是and则用and连接
1万+
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
