资质证书
资质证书
三级栏目,TpMeCMS后台添加和编辑页面的文件下拉等输入框代码替换

add_he是点击触发添加的html。

代码如下

            $(document).on("click", ".add_he", function(){
                
                Controller.api.bindevent();
            });
            

全部源码如下

define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {

    var Controller = {
        index: function () {
            // 初始化表格参数配置
            Table.api.init({
                extend: {
                    index_url: 'typeimages/index' + location.search,
                    add_url: 'typeimages/add',
                    edit_url: 'typeimages/edit',
                    del_url: 'typeimages/del',
                    multi_url: 'typeimages/multi',
                    import_url: 'typeimages/import',
                    table: 'typeimages',
                }
            });

            var table = $("#table");

            // 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                pk: 'id',
                sortName: 'id',
                columns: [
                    [
                        {checkbox: true},
                        {field: 'id', title: __('Id')},
                        {field: 'image', title: __('Image'), operate: false, events: Table.api.events.image, formatter: Table.api.formatter.image},
                        {field: 'type', title: __('Type'), operate: 'LIKE'},
                        {field: 'size', title: __('Size'), operate: 'LIKE'},
                        {field: 'price', title: __('Price'), operate: 'LIKE'},
                        {field: 'goods.name', title: __('Goods.name'), operate: 'LIKE'},
                        {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}
                    ]
                ]
            });

            // 为表格绑定事件
            Table.api.bindevent(table);
        },
        add: function () {
            Controller.api.bindevent();
        },
        edit: function () {
            Controller.api.bindevent();
        },
        edits: function () {
            Controller.api.bindevent();   
            // 添加户型
            $(document).on('click', '.add_he', function(){

                var max = 0;//$('.view1').attr('data-key');
                for (let index = 0; index < 300; index++) {
                    // const element = array[index];
                    var temp = $('.view'+index).attr('data-key');
                    if(temp!=null){
                        max = temp;
                    }
                }
                // alert(max);
                if(max!=null || max>0){
                    var old = max;
                    max++;
                    // alert('max不未空'+max);
                    var str2 = $('#school_str').val(); 
                    var str = '<div class="col-xs-12 col-md-12 border-primary view'+max+'" data-key="'+max+'" style="border: 2%; border-radius:5px;background-color: rgba(71, 67, 75, 0.173); padding: 20px 10px 10px 20px; margin: 10px;" ><div class="del_he pull-right btn btn-danger" data-key="'+max+'">删除该户型</div><div class="form-group"><label class="control-label col-xs-12 col-sm-2">户型图</label><div class="col-xs-12 col-sm-8"><div class="input-group"><input id="c-image'+max+'" class="form-control" size="50" name="row['+max+'][image]" type="text" value=""><div class="input-group-addon no-border no-padding"><span><button type="button" id="faupload-image'+max+'" class="btn btn-danger faupload" data-input-id="c-image'+max+'" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-image'+max+'"><i class="fa fa-upload"></i> 上传</button></span><span><button type="button" id="fachoose-image'+max+'" class="btn btn-primary fachoose" data-input-id="c-image'+max+'" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> 选择</button></span></div><span class="msg-box n-right" for="c-image"></span></div><ul class="row list-inline faupload-preview" id="p-image"></ul></div></div><div class="form-group"><label class="control-label col-xs-12 col-sm-2">户型</label><div class="col-xs-12 col-sm-8"><input id="c-type" class="form-control" name="row['+max+'][type]" type="text" value=""></div></div><div class="form-group"><label class="control-label col-xs-12 col-sm-2">面积</label><div class="col-xs-12 col-sm-8"><input id="c-size" class="form-control" name="row['+max+'][size]" type="text" value=""></div></div><div class="form-group"><label class="control-label col-xs-12 col-sm-2">价格</label><div class="col-xs-12 col-sm-8"><input id="c-price" class="form-control" name="row['+max+'][price]" type="text" value=""></div></div></div>';
                    if(old==0){
                        $('.data').after(str);
                    }else{
                        $('.view'+old).after(str);
                    }
                    
        
                 
                }else{
                    
                    max = 1;
                    var str2 = $('#school_str').val(); 
                    var str = '<div class="col-xs-12 col-md-12 border-primary view'+max+'" data-key="'+max+'" style="border: 2%; border-radius:5px;background-color: rgba(71, 67, 75, 0.173); padding: 20px 10px 10px 20px; margin: 10px;" ><div class="del_he pull-right btn btn-danger" data-key="'+max+'">删除该户型</div><div class="form-group"><label class="control-label col-xs-12 col-sm-2">户型图</label><div class="col-xs-12 col-sm-8"><div class="input-group"><input id="c-image'+max+'" class="form-control" size="50" name="row['+max+'][image]" type="text" value=""><div class="input-group-addon no-border no-padding"><span><button type="button" id="faupload-image'+max+'" class="btn btn-danger faupload" data-input-id="c-image'+max+'" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-image'+max+'"><i class="fa fa-upload"></i> 上传</button></span><span><button type="button" id="fachoose-image'+max+'" class="btn btn-primary fachoose" data-input-id="c-image'+max+'" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> 选择</button></span></div><span class="msg-box n-right" for="c-image"></span></div><ul class="row list-inline faupload-preview" id="p-image"></ul></div></div><div class="form-group"><label class="control-label col-xs-12 col-sm-2">户型</label><div class="col-xs-12 col-sm-8"><input id="c-type" class="form-control" name="row['+max+'][type]" type="text" value=""></div></div><div class="form-group"><label class="control-label col-xs-12 col-sm-2">面积</label><div class="col-xs-12 col-sm-8"><input id="c-size" class="form-control" name="row['+max+'][size]" type="text" value=""></div></div><div class="form-group"><label class="control-label col-xs-12 col-sm-2">价格</label><div class="col-xs-12 col-sm-8"><input id="c-price" class="form-control" name="row['+max+'][price]" type="text" value=""></div></div></div>';
                    $('.data').after(str);

                   
                }

                
                
            });


        
         

            // 移除户型
            $(document).on('click', '.del_he', function(){
               
                var key = $(this).attr('data-key');
                console.log(key);

                var id = $('#id'+key).val();
                if(id!=null && id>0){
                    // alert('该户型有id'+id);
                    var url = '/h.php/typeimages/del';
                    
                    $.post(url, { action:'del',ids:id,params:''},
                    function(res){
                        console.log(res);
                        if(res.code==1){
                            $('.view'+key).remove();
                        }else{
                            alert(res.msg);
                        }
                        
                    });

                }else{
                    $('.view'+key).remove();
                }
            });

            $(document).on("click", ".add_he", function(){
        
                Controller.api.bindevent();
            });
            

        },


        api: {
            bindevent: function () {
                Form.api.bindevent($("form[role=form]"));
            }
        }
    };
    return Controller;
});

上一篇: None