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

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

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;
                                    }
                                } ]
相关文章
|
7月前
|
数据库
Layui入门&动态树&动态选项卡&用户增加&修改&删除&(一)
Layui入门&动态树&动态选项卡&用户增加&修改&删除&
|
JavaScript 索引
【vue】element ui 实现动态表单点击按钮新增行/删除行
【vue】element ui 实现动态表单点击按钮新增行/删除行
3168 0
|
3月前
|
JavaScript
vue3表格编辑(数据回显)和删除功能实现
vue3表格编辑(数据回显)和删除功能实现
|
4月前
|
缓存 JavaScript 前端开发
vue + element Table的数据多选,多页选择数据回显,分页记录保存选中的数据。
vue + element Table的数据多选,多页选择数据回显,分页记录保存选中的数据。
|
6月前
|
前端开发
ztree实现编辑和删除功能
ztree实现编辑和删除功能
53 0
|
7月前
|
JavaScript 前端开发 Java
31jqGrid 行编辑- 自定义编辑
31jqGrid 行编辑- 自定义编辑
27 0
|
7月前
|
JavaScript 前端开发 Java
33jqGrid 行编辑- 全列编辑
33jqGrid 行编辑- 全列编辑
20 0
|
7月前
Layui入门&动态树&动态选项卡&用户增加&修改&删除&(二)
Layui入门&动态树&动态选项卡&用户增加&修改&删除&
|
数据格式 索引
uniapp——左滑编辑删除按钮实现,以及表单验证
左滑编辑删除按钮实现,以及表单验证
615 0
|
前端开发 JavaScript
前端:js根据CheckBox获得选中行的具体某些列内容(批量操作传多条数据)
前端:js根据CheckBox获得选中行的具体某些列内容(批量操作传多条数据)
142 0