jquery 如何动态使用Tom-select?

pnwntuvh  于 2022-12-22  发布在  jQuery
关注(0)|答案(1)|浏览(220)

在我的模态中有一个包含汤姆选择输入的表。我还做了一个添加按钮来添加汤姆选择输入。所以当我点击添加按钮时,我克隆了包含汤姆选择输入的表,但是克隆的表中的汤姆选择输入不起作用...我如何动态地使用汤姆选择输入?这是我的代码。

show modal : 

        this.show = function(){
            var main = this;
            var items= main.items;
            var modalTitle = "modalTitle";
            var modalMsg = ' <div id="modal-id">';
            modalMsg    += '    <table id = "MyTable" class="table">';
            modalMsg    += '        <tbody>';
            modalMsg    += '            <tr>';
            modalMsg    += '                <th class="col-xs-3"> 25125211  : </th>';
            modalMsg    += '                <td class="col-xs-9"><label class="col-xs-3"><input type="radio" class="input-val" name="confirm_radio" id="approve" value="100" required>apporve</label>';
            modalMsg    += '                <label class="col-xs-3"><input name="confirm_radio" id="refer" type="radio" value="900" required>refer</label></td>';
            modalMsg    += '            </tr>';
            modalMsg    += '            <tr id = "tomselect-tr">';
            modalMsg    += '                <th class="col-xs-3"> chooseTomselectOption </th>';
            modalMsg    += '                <td>';
            modalMsg    += '                   <div class="input-group"><select id="TomSelect_1" placeholder="choose an item..."></select><span class="input-group-btn"><button id="cloneTr" type="button"  class="btn btn-tool"><i class="fa fa-plus"></i></button></span></div>';
            modalMsg    += '                </td>';
            modalMsg    += '            </tr>';       
            modalMsg    += '        </tbody>';
            modalMsg    += '    </table>';
            modalMsg    += ' </div>';
            var modalBtn1Text = "done";
            var modalBtn2Text = "cancel";
            var modalCallback;

            var updateCallback = function(){
                agreementInfo.saveInfo();
            };
            modalCallback = updateCallback;

            this.modal = new _modal.show(modalTitle
                ,modalMsg
                ,modalBtn1Text
                ,modalBtn2Text
                ,modalCallback
            );

克隆Tr函数:

function cloneTr(){

        trNum++;
    
        var $newTr= $("#tomselect-tr").clone();     
            

        $newTr.attr("id", "tomselect-tr""+trNum);

       $newTr.find("#TomSelect_1").attr("id","TomSelect_"+trNum);

        $("#MyTable").find("tbody").find("#tomselect-tr"").after($addChoiceGrantorTr);
        
        var targetDiv = "TomSelect_"+trNum;
        
        addSelector(targetDiv);
        
    }

添加选择器函数

function addSelector(_targetDiv){

        var selector = new TomSelect("#"+_targetDiv,{
            valueField: 'USR_NO',
            searchField: ['USR_NM', 'USR_ID', 'USR_EMAIL', 'GP_NM'],
            maxItems: 1,
            maxOptions: 100,
            options: items,
            render: {
                option: function(data, escape) {
                    console.log(escape);
                    return  '<div>' +
                        '   <span class="USR_NM">' + escape(data.USR_NM) + '</span>' +
                        '   <span class="GP_NM">' + escape(data.GP_NM) + '</span>' +
                        '   <span class="USR_ID">' + escape(data.USR_ID) + '</span>' +
                        '   <span class="USR_EMAIL">'  + escape(data.USR_EMAIL) + '</span>' +
                        '</div>';
                },
                item: function(data, escape) {
                    return  '<div id="'+itemDivTxt+'" title="' + escape(data.USR_NO) + '" data-name="' + escape(data.USR_NM) + '">' +
                        '   <span class="tom-select-name">' + escape(data.USR_NM) + '</span>' +
                        '   <span class="tom-select-group">' + escape(data.GP_NM) + '</span>' +
                        '</div>';
                }
            }
        });
        selector.clearCache();
    }

当我点击添加按钮时,我怎样才能动态地使用tomselect或者初始化??谢谢

hm2xizp9

hm2xizp91#

我试图克隆错误的对象...我做了一个临时的tr对象并克隆它...它工作了

相关问题