动态表格之查看、删除、编辑

页面原型

图片.png

table的动态生成代码：

var dataTable;
    var $table = $("#dataTable");
    /**
     * dataTable事件初始化方法
     */
    var handleRecords = function() {
        dataTable = new Datatable();
        dataTable
                .init({
                    src : $table,
                    onQuery : function(data) {
                        data.personId = $("#personIdQuery").val();
                        data.personName = $("#personNameQuery").val();
                        data.personSex = $("#personSexQuery").val();
                        data.organId = $("#organQuery").val();
                    },
                    dataTable : {
                        "ajax" : {
                            "url" : basePath
                                    + "personInfo/getPersonInfoListPage" // ajax
                                                                            // source
                        },
                        "columns" : [
                                
                                {
                                    data : 'personId',
                                    orderable : true,
                                    searchable : true
                                },
                                {
                                    data : 'personName',
                                    orderable : true,
                                    searchable : true
                                },
                                {
                                    data : 'personSex',
                                    orderable : true,
                                    render : function(data, type, full) {
                                        return data == '1000001' ? '男' : '女';
                                    }
                                },
                                {
                                    data : 'organName',
                                    orderable : true,
                                    searchable : true
                                },
                                {
                                    data : 'birthday',
                                    orderable : true,
                                    render : function(data, type, full) {
                                        if(data==null || data ==''){
                                            return '';
                                        }
                                         var date = new Date;
                                         var year = date.getFullYear(); 
                                         var month = date.getMonth()+1;
                                         var byear = data.substring(0,4);
                                        return year-Number(byear);
                                    }
                                },
                                {
                                    data : 'personLiable',
                                    orderable : true,
                                    searchable : true
                                },
                                {
                                    data : 'operate',
                                    orderable : false,
                                    render : function(data, type, full) {
                                        var str ='<a class="check btn default btn-xs purple" personId="'+ full.id+ '">查看</a> ';
                                        if($("#delete").val() == 1){
                                            str = str + '<a class="delete btn default btn-xs purple" personId="'+ full.id + '">刪除</a> ';
                                        }
                                        
                                        if($("#update").val() == 1){
                                            str = str + '<a class="edit btn default btn-xs purple" personId="'+ full.id+ '">编辑</a>';
                                        }

                                        return str;
                                    }
                                } ]
                    }
                });
        $("#dataTableReload").on("click", function() {
            dataTable.reloadTable();
        });
    };

添加查看、删除、编辑的关键代码：

{
                                    data : 'operate',
                                    orderable : false,
                                    render : function(data, type, full) {
                                        var str ='<a class="check btn default btn-xs purple" personId="'+ full.id+ '">查看</a> ';
                                        if($("#delete").val() == 1){
                                            str = str + '<a class="delete btn default btn-xs purple" personId="'+ full.id + '">刪除</a> ';
                                        }
                                        
                                        if($("#update").val() == 1){
                                            str = str + '<a class="edit btn default btn-xs purple" personId="'+ full.id+ '">编辑</a>';
                                        }

                                        return str;
                                    }
                                } ]

原文作者：祈澈姑娘
技术博客：https://www.jianshu.com/u/05f416aefbe1

90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。