专栏首页编程微刊动态表格之查看、删除、编辑

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

页面原型

图片.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;
                                    }
                                } ]

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【前端统计图】echarts实现简单柱状图项目地址下载:

    王小婷
  • 【前端统计图】echarts实现单条折线图

    王小婷
  • Vue移动端框架Mint UI教程-数据渲染到页面(六)

    拿到res.data之后,要赋值给page实例里面的data 所以在data里面设置一个默认的空数组

    王小婷
  • linux下增加磁盘改变指定文件路径分区挂载点和迁移数据

    张善友
  • linux下增加磁盘改变指定文件路径分区挂载点和迁移数据

    Centos7 系统上原有目录/data 挂载根目录下,空间有点小,我们需要把/data目录挂载到另一个磁盘,同时把数据迁移。 1.查看分区情况 fdisk ...

    张善友
  • 机器学习入门数据集--3.手写数字识别

    MNIST 数据集来自美国国家标准与技术研究所, National Institute of Standards and Technology (NIST)。训...

    birdskyws
  • VaR系列(三):DCC模型估计组合VaR

    需要说明的一点是,如果我们假设所有的单个资产收益率都服从正态分布,资产组合的收益率是单个资产收益率的加权和,也服从正态分布,这种情况下,计算VaR只需要对组合的...

    量化小白
  • python数据清洗

    数据的质量直接关乎最后数据分析出来的结果,如果数据有错误,在计算和统计后,结果也会有误。 所以在进行数据分析前,我们必须对数据进行清洗。需要考虑数据是否需要修...

    Python疯子
  • Python 数据分析学习笔记

    一、基本语法 [1507772432114_7239_1507772402948.jpg] 资料地址:http://www.icoolxue.com/album...

    1039778
  • Python 数据分析学习笔记

    一、基本语法 [1507772432114_7239_1507772402948.jpg] 资料地址:http://www.icoolxue.com/albu...

    1039778

扫码关注云+社区

领取腾讯云代金券