深入學習jquery原始碼之查詢選擇外掛的實現
阿新 • • 發佈:2018-12-24
深入學習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();
});