鍍金池/ 問(wèn)答/HTML5  HTML/ 彈出式窗口組件,如何實(shí)現(xiàn)選擇后返回選擇的值

彈出式窗口組件,如何實(shí)現(xiàn)選擇后返回選擇的值

需求:

  • 調(diào)用一個(gè)方法,彈出組件,異步加載選擇菜單,選擇后返回選擇對(duì)應(yīng)的行的數(shù)據(jù)。

  • 要求返回一個(gè)JSON值,給調(diào)用的對(duì)象。

                var singleSelector = {
                    dataTableLoc:{},
                    returnData:{},
                    //彈出modal
                    open:function(){
                           $('#myModal').modal({
                             });
                           this.getData();
                    },
                    getData:function(){
                        that =this;
                    //dataTable 初始化
                    this.dataTableLoc = $('#dataTableLoc').custDataTable({
                        'ajax': '/segmentFaultTest/getloc',
                        destroy: true, //Cannot reinitialise DataTable,解決重新加載表格內(nèi)容問(wèn)題  
                        'bPaginate': true,
                        dataSrc:function(data){
                            //  that.returnData = data;
                            //  console.log(that.returnData)
                        },
                        "columns": [
                            {
                                "data": "loc",
                                'class': 'text-center',
                                "mRender": function (data, type, row) {
                                    return '<a onclick="singleSelector.pickLoc(\'' + data + '\',\'' + row.cameraCode + '\')" class="selectionLoc pointer" data-dismiss="modal">' + data + '</a>';
                                }
                            }
                        ]
                    });
                    },
                    pickLoc:   function(data, cameraCode) {
                        this.returnData   = {cameraCode:cameraCode,loc:data}
                       return this.returnData;
                     },
                 //地址彈出框查詢(xún)事件
                search:function () {
                     this.dataTableLoc.search($('#filter').val()).draw(); 
                      this.dataTableLoc.refresh();
                      }
                }           

問(wèn)題:

選擇后的值不知道該存到哪里去?又或者說(shuō)如何返回給調(diào)用的人?

直接retrun returnData肯定是undefined?

有想過(guò)類(lèi)似日期插件,彈出選擇,那也是回填到一個(gè)input框內(nèi),完成了操作。

說(shuō)要調(diào)用的時(shí)候,返回這個(gè)值。不是異步的嗎?感覺(jué)有點(diǎn)撓頭。

莫非這是個(gè)偽需求?

感覺(jué)陷入迷思了,希望大家點(diǎn)撥一下。

回答
編輯回答
愚念

jquery的話(huà)個(gè)人可能會(huì)這樣做:

在觸發(fā)彈窗選擇的元素上添加一個(gè)自定義事件比如(onModalChange)
在彈窗選擇數(shù)據(jù)時(shí)(或選擇后點(diǎn)確定時(shí))去觸發(fā)自定義事件(帶參數(shù)的自定義事件)參考trigger文檔, 將你需要的json做為參數(shù)去觸發(fā)事件.
在元素的自定義事件中獲取選擇的json,然后可以存入元素的data-data中備用.
后面就根據(jù)業(yè)務(wù)需要處理了...

2017年4月1日 23:57
編輯回答
悶油瓶

你的需求和我寫(xiě)的一個(gè)日歷組件的需求很相近,你應(yīng)該用的是vuejs,實(shí)現(xiàn)起來(lái)很簡(jiǎn)單,你只需要在組件內(nèi)部emit一個(gè)事件,并且傳入你想暴露給外部使用組件的環(huán)境的數(shù)據(jù)就好了,接下來(lái)就是在使用組件時(shí)監(jiān)聽(tīng)這個(gè)事件了。
286行開(kāi)始。
https://gitee.com/Daniel_Deng...

2018年8月5日 16:27
編輯回答
瘋浪

選擇后返回對(duì)應(yīng)的值,這是異步的呀,試試Promise,

function getDate(){
    return new Promise(function(){
        ....
        //返回對(duì)應(yīng)的值
       resolve(data);
    })
}
getDate().then(res=>{
    
})
2017年8月3日 06:08