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


    页面原型


    5640239-d4cf029bd227ae25.png
    图片.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后前端妹子,爱编程,爱运营,爱折腾。
    坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

  • 相关阅读:
    Kotlin使用常见问题汇总
    浅谈Kotlin(五): 静态变量&静态方法
    浅谈Kotlin(八):空安全、空类型
    浅谈Kotlin(七):lateinit、by lazy 使用
    浅谈Kotlin(六):data class的使用
    实例:([Flappy Bird Qlearning]
    强化学习之MountainCarContinuous(注册自己的gym环境)
    seq2seq之双向解码
    AwesomeVisualCaptioning
    VUE hash路由和history路由的区别
  • 原文地址:https://www.cnblogs.com/ting6/p/9725833.html
Copyright © 2020-2023  润新知