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

页面原型

图片.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 条评论
登录 后参与评论

相关文章

来自专栏Java学习123

CentOS 7.0关闭默认防火墙启用iptables防火墙

4225

在Debian上安装McMyAdmin for Minecraft

McMyAdmin是最受欢迎的Minecraft服务器控制面板之一。它拥有与第三方mod的兼容性,专注于服务器安全性和管理服务器的Web界面流畅性。本指南介绍了...

951
来自专栏蓝天

Linux操作系统下IPTables配置方法详解

Chain RH-Firewall-1-INPUT (0 references)

4163
来自专栏散尽浮华

centos7下部署iptables环境纪录(关闭默认的firewalle)

CentOS7默认的防火墙不是iptables,而是firewall. 由于习惯了用iptables作为防火墙,所以在安装好centos7系统后,会将默认的fi...

2385
来自专栏散尽浮华

通过iptables限制sftp端口连接数

之前在公司服务器上部署了sftp,用于上传业务系统的附件。后来由于程序连接问题,使的sftp连接数过多(做多时高达400多个sftp连接数),因为急需要对sft...

47210
来自专栏运维小白

10.15 iptables filter表案例

iptables常用知识回顾点 iptables -I/-A/-D 后紧跟 链 ,可以是INPUT,OUTPUT,FORWARD iptables -P 用来指...

2039
来自专栏Java成神之路

Java_注解_异常_01_ElementType cannot be resolved to a variable

import java.lang.annotation.RetentionPolicy;

722
来自专栏北京马哥教育

Iptables防火墙 基础知识

Iptables防火墙 基础知识 位置 使用vim /usr/sysconfig/iptables 启动、关闭、保存 service iptables stop...

3106
来自专栏清晨我上码

第七节 netty前传-NIO 几种channel介绍

FileChannel.write()方法将数据写入FileChannel,该方法将Buffer作为参数。

1394
来自专栏运维小白

linux基础(day 33)

10.11 Linux网络相关 linux网络相关 ifconfig命令,可以查看虚拟网卡,而ip addr命令则不能查看 ifconfig查看网卡ip(yum...

2669

扫码关注云+社区

领取腾讯云代金券