深入学习jquery源码之上传查询选择插件的实现
;(function($){
var defaults = {
url : "",
fieldCode: "",
multi : false,
area: ['40%','80%'],
code:['code','name'] //注意顺序，先是code,再是name
};
function renderSelector(options){
debugger;
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;
this.init();
}
//为函数添加原型链上的方法
renderSelector.prototype = {
init: function(){
debugger;
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 param=$("#" + this.settings.fieldCode + "-popSelector").find("input[type='hidden']").val();
var _self = this;
var url = "";
var urlParam=_self.settings.url;
if(urlParam.indexOf("?") != -1 ){
url=CONTEXT_PATH + urlParam+"&ids="+param;
}else{
url = CONTEXT_PATH + urlParam+"?ids="+param;
}
var layIndex = layer.open({
type: LayuiPopStyle.LAYUI_IFRAME_LAYER,
title: "查询选择",
maxmin: false,
shadeClose: false, //开启遮罩关闭
area: _self.settings.area,
btn: ['确认', '取消'],
content: url,
success: function(layero){
},
yes: function(index, layero){ //如果设定了yes回调，需进行手工关闭
//当点击‘确定’按钮的时候，获取弹出层返回的值
var dataArr = window["layui-layer-iframe" + index].querySelectCallbackData();
if(dataArr.length == 0){
layer.msg("只能选择数据...", {icon: 5});
return false;
}
if(!eval(_self.settings.multi) && dataArr.length > 1){ //默认单选
layer.msg("只能选择一条数据...", {icon: 5});
return false;
}
var _keys = _self.settings.code,
code = "",
name = "";
userId = "";
if(!_self.settings.multi){
code = dataArr[0]['code'];
name = dataArr[0]['name'];
}else{
var _code = "",
_name = "";
_userId="";
for(var i=0,len=dataArr.length; i<len; i++){
_code += dataArr[i]['code'] +",";
_name += dataArr[i]['name'] +",";
if(!$.isEmptyStr(dataArr[i]['userId']))
{
_userId += dataArr[i]['userId'] +",";
}
}
code = _code.substring(0,_code.length-1);
name = _name.substring(0,_name.length-1);
if(_userId.length>1)
{
userId += _userId.substring(0,_userId.length-1);
}
}
//给input[name='']:text 赋值
$("input[name='" + _keys[0] + "']:hidden").val(code);
$("input[name='" + _keys[1] + "']:text").val(name);
$("textarea[name='"+ _keys[1] + "']").val(name);
if(!$.isEmptyStr())
if(!$.isEmptyStr(userId))
{
$("input[name='orgUserId']:hidden").val(userId);
}
layer.close(index);
},
end: function(){ //销毁列表回调方法
},
cancel: function(){ //点击左上角关闭按钮回调方法
}
});
},
clearSelect : function(){
var _self = this,
_keys = _self.settings.code;
$("input[name='" + _keys[0] + "']:hidden").val("");
$("input[name='" + _keys[1] + "']:text").val("");
}
}
//扩展jquery类方法
$.extend({
renderSelector : function(options){
return new renderSelector(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();
});
