前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >动态表格之查看、删除、编辑

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

作者头像
王小婷
发布2018-06-01 17:44:16
1.9K0
发布2018-06-01 17:44:16
举报
文章被收录于专栏:编程微刊编程微刊

页面原型

图片.png

table的动态生成代码:

代码语言:javascript
复制
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();
        });
    };

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

代码语言:javascript
复制
{
                                    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;
                                    }
                                } ]
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017.11.16 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档