深入学习jquery源码之上传查询选择插件的实现
;(function($){
var options = {
fieldCode: \"gfyId\",...
深入学习jquery源码之上传查询选择插件的实现
;(function($){
var options = {
fieldCode: \"gfyId\",
url: \"../../Security/selector/user/PublicServiceUserList.html?s=\" + Math.random(),
multi: false,
code: \"gfyId,gfyIdName\",
keyRespField: \"gfyId,id\",
dictCode: \"publicserviceName\",
area: [\'90%\',\'90%\']
};
/*引用查询选择*/
function renderSelectorMy(options){
var defaults = {};
this.settings = $.extend({},defaults,options);
var $domObj = $(\"#\" + this.settings.fieldCode + \"-popSelector\");
this.settings.url = $domObj.attr(\"action\") ? $domObj.attr(\"action\") : this.settings.url;
this.settings.multi = $domObj.attr(\"multi\") ? $domObj.attr(\"multi\") : this.settings.multi;
this.settings.code = $domObj.attr(\"codeAndName\") ? $domObj.attr(\"codeAndName\").split(\",\") : this.settings.code.split(\",\");
this.settings.keyRespField = this.settings.keyRespField ? this.settings.keyRespField.split(\",\") : \"\";
this.init();
}
//为函数添加原型链上的方法
renderSelectorMy.prototype = {
init: function(){
var _self = this,
_keys = _self.settings.code;
$(\"input[name=\'\" + _keys[0] +\"\']\").parent().parent().find(\"button\").unbind(\'click\').bind(\'click\', function(){
var action = \"_self.\" + $(this).attr(\"action\");
eval(action);
});
},
//扩展jquery类方法
$.extend({
renderSelectorMyf : function(options){
return new renderSelectorMy(options);
}
});
})(jQuery)
如何使用
renderSelector = $.renderSelectorMyf({
fieldCode: \"gfyId\",
url: \"../../Security/selector/user/UserList.html?s=\" + Math.random(),
multi: false,
code: \"gfyId,gfyIdName\",
keyRespField: \"gfyId,id\",
dictCode: \"publicserviceName\",
area: [\'90%\',\'90%\']
});
_self.renderSelectors = [renderSelector];
具体实现
html
<p align=\"left\" id=\"gfyId-popSelector\">用户名称：
<input name=\"gfyIdName\" class=\"easyui-textbox\" disabled style=\"width: 120px;\">
<input type=\"hidden\" name=\"gfyId\">
<button type=\"button\" id=\"gfyButton\" class=\"btn btn-info btn-sm\" action=\"querySelect(this,event)\">
选择
</button>
</p>
定义局部闭包，覆盖原有的覆盖方法实现数据加载
var _self = new View();
$(function () {
_self.createCusView = function(){
$(\"#WindowFire\").combobox({
url: _self.dicurl+\'yesno\'
});
}
_self.init = function(){
_this = this;
renderSelector = $.renderSelector({
fieldCode: \"gfyId\",
url: \"../../Security/selector/user/UserList.html?s=\" + Math.random(),
multi: false,
code: \"gfyId,gfyIdName\",
keyRespField: \"gfyId,id\",
dictCode: \"publicserviceName\",
area: [\'90%\',\'90%\']
});
_this.renderSelectors = [renderSelector];
if (key&&key!=\"\") {
$.get(\"security/installapplyvo/getById/\" + key, function (data) {
_this.getMainData = data;
if($.util.request[\"type\"] != \"add\" && _this.renderSelectors){
for(var i=0,len=_this.renderSelectors.length; i<len; i++){
var renderSelector = _this.renderSelectors[i],
dictDatas = $Core.DicCache.get(renderSelector.settings.dictCode);
renderSelector.echoSelect(data, dictDatas);
}
}
});
_self.init();
;(function($){
var options = {
fieldCode: \"gfyId\",
url: \"../../Security/selector/user/UserList.html?s=\" + Math.random(),
multi: false,
code: \"gfyId,gfyIdName\",
keyRespField: \"gfyId,id\",
dictCode: \"publicserviceName\",
area: [\'90%\',\'90%\']
};
/*引用查询选择*/
function renderSelectorMy(options){
var defaults = {};
this.settings = $.extend({},defaults,options);
var $domObj = $(\"#\" + this.settings.fieldCode + \"-popSelector\");
this.settings.url = $domObj.attr(\"action\") ? $domObj.attr(\"action\") : this.settings.url;
this.settings.multi = $domObj.attr(\"multi\") ? $domObj.attr(\"multi\") : this.settings.multi;
this.settings.code = $domObj.attr(\"codeAndName\") ? $domObj.attr(\"codeAndName\").split(\",\") : this.settings.code.split(\",\");
this.settings.keyRespField = this.settings.keyRespField ? this.settings.keyRespField.split(\",\") : \"\";
this.init();
}
//为函数添加原型链上的方法
renderSelectorMy.prototype = {
init: function(){
var _self = this,
_keys = _self.settings.code;
$(\"input[name=\'\" + _keys[0] +\"\']\").parent().parent().find(\"button\").unbind(\'click\').bind(\'click\', function(){
var action = \"_self.\" + $(this).attr(\"action\");
eval(action);
});
},
querySelect : function(thi,event){
var _self = this;
var url = _self.settings.url;
var _keys = _self.settings.code;
var keyRespField = _self.settings.keyRespField;
var id = keyRespField[1];
var ids = $(\"input[name=\'\" + _keys[0] +\"\']\").val();
if(url.indexOf(\"?\") != -1) {
url = url + \"&\" + id + \"=\"+ids;
}else {
url = url + \"?\" + id + \"=\"+ids;
}
$Core.UI.openDialog(\"selwind\", url,
{
title: \"列表选择\",
width: _self.settings.area[0],
height: _self.settings.area[1],
onClose: function () {
}
});
},
echoSelect : function(_data){
var _self = this;
var data = _data.data,
_keys = _self.settings.code,
_rkeys = _self.settings.keyRespField,
dictName = \"\",
dictCode = _self.settings.dictCode;
$Core.DicCache.initDictionary(dictCode,function(dicts){
var _dicts = dicts;
if(dicts && dicts.data){
var dictDatas = dicts.data[dictCode];
for(var i=0,len=dictDatas.length; i<len; i++){
var item = dictDatas[i];
if(data[_keys[0]] == item[_rkeys[1]]){
var itemName = item.text;
dictName += itemName +\",\";
}
}
$(\"span input:text\", $(\"div #\" + _keys[0] + \"-popSelector\")).val(dictName.substr(0,dictName.length-1));
}else{
$(\"span input:text\", $(\"div #\" + _keys[0] + \"-popSelector\")).val(dictName);
}
})
},
selectResultAfterCallback: function(checkRlt){
var _self = this,
multi = _self.settings.multi;
if(checkRlt.length == 0){
$Core.UI.message.warning(\"选请选择数据!\");
}
if(!multi && checkRlt.length != 1){
$Core.UI.message.warning(\"单选,请选择一条数据!\");
}
var _keys = _self.settings.code,
code = \"\",
name = \"\";
if(!_self.settings.multi){
code = checkRlt[0][\'code\'];
name = checkRlt[0][\'name\'];
}else{
var _code = \"\",
_name = \"\";
for(var i=0,len=dataArr.length; i<len; i++){
_code += checkRlt[i][\'code\'] +\",\";
_name += checkRlt[i][\'name\'] +\",\";
}
code = _code.substring(0,_code.length-1);
name = _name.substring(0,_name.length-1);
}
//给input[name=\'\']:text 赋值
address = checkRlt[0][\'address\'];
headPerson = checkRlt[0][\'headPerson\'];
headPersonPhone = checkRlt[0][\'headPersonPhone\'];
customerType = checkRlt[0][\'customerType\'];
$(\"input[name=\'address\']\").val(address);
$(\"input[name=\'headPerson\']\").val(headPerson);
$(\"input[name=\'headPersonPhone\']\").val(headPersonPhone);
/*$(\"input[name=\'customerType\']\").val(customerType);*/
$(\"#customerType\").combobox(\"setValue\", customerType);
$(\"input[name=\'\" + _keys[0] + \"\']:hidden\").val(code);
$(\"span input:text\", $(\"div #\" + _keys[0] + \"-popSelector\")).val(name);
$(\".panel-tool-close\").trigger(\'click\');
}
}
//扩展jquery类方法
$.extend({
renderSelectorMyf : function(options){
return new renderSelectorMy(options);
}
});
})(jQuery)
renderSelector = $.renderSelectorMyf({
fieldCode: \"gfyId\",
url: \"../../Security/selector/user/UserList.html?s=\" + Math.random(),
multi: false,
code: \"gfyId,gfyIdName\",
keyRespField: \"gfyId,id\",
dictCode: \"publicserviceName\",
area: [\'90%\',\'90%\']
});
_self.renderSelectors = [renderSelector];
});
调用的查询选择页面
UserList.html
var _self = new CntenListView();
$(function () {
var columns = [
{field:\'ck\',checkbox:true},
{field:\'id\',hidden:true},
{field:\'userCode\',title:\'用户编码\',align:\'center\',width:100},
{field:\'userName\',title:\'用户名称\',align:\'center\',width:140},
{field:\'headPerson\',title:\'负责人\',align:\'center\',width:90},
{field:\'headPersonPhone\',title:\'负责人电话\',align:\'center\',width:120}
];
_self.listOption.idKey = \"id\";
_self.listOption.columns = columns;
_self.listOption.url = \"security/publicservicesuser\";
_self.listOption.formurl = \"\";
_self.listOption.dictCodes = \"customerType,yesno\";
_self.listOption.searchform = \"search_form\";
_self.cusButtonEvents = function(){
};
_self.createCusView = function(){
};
_self.initControl = function () {
var $btnQuery = $(\"#btnquery\");
$(\"#dglist\").datagrid({
url: _self.listOption.url+\'/query\',
checkOnSelect:true,
columns:[_self.listOption.columns],
idField: _self.listOption.idKey,
onBeforeLoad: function (paras) {
var v = $Core.util.QueryFormSerializeString(\'search_form\');
v = v.replace(\'orgDataCode\',\'marketingDepartment\');
paras.querystr = v;
},
onLoadSuccess: function () {
$btnQuery.find(\"span\").text(\"查询\");
$btnQuery.removeAttr(\"disabled\", \"disabled\");
$btnQuery.find(\"i\").attr(\"class\", \"glyphicon glyphicon-search\");
},
onLoadError: function () {
$btnQuery.find(\"span\").text(\"查询\");
$btnQuery.removeAttr(\"disabled\", \"disabled\");
$btnQuery.find(\"i\").attr(\"class\", \"glyphicon glyphicon-search\");
}
});
}
$(\"#btnConfirm\").bind(\'click\',function(){
var $dg = $(\"#dglist\");
var rows = $dg.datagrid(\"getSelections\");
var renderSelectObj = parent.renderSelector;
renderSelectObj.selectResultAfterCallback(rows);
$(\'.panel-tool-close\', parent.document).each(function (j, k) {
k.click();
});
});
_self.init();
});
版权声明
本文仅代表作者观点，不代表百度立场。
本文系作者授权百度百家发表，未经许可，不得转载。
