esay ui 数据表格动态添加删除行

最新推荐文章于 2020-06-25 17:26:40 发布

不掉头发的攻城狮

最新推荐文章于 2020-06-25 17:26:40 发布

阅读量605

点赞数

分类专栏：前端文章标签： esay ui动态添加行

本文链接：https://blog.csdn.net/wjs_1997/article/details/102744872

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" type="text/css" href="../js/jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../js/jquery-easyui/themes/icon.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="../js/jquery-easyui/jquery.easyui.min.js"></script>
<body>
<button type="button" id="but" >添加</button>
<button type="button" id="shanchu">删除</button>

<div id="tabel_con"></div>

</body>
<script>
    var resultRow = new Array();
   $(function () {
       var r=[{name:'', number:'', pay:'',  adress:''}];
       createTableHeader(r);
     /*  var temp=;*/
        $('#but').click(function () {
           /* $('#tabel_con').datagrid('endEdit');*/
            if(resultRow.length==0){
                createTableHeader(r);
            }else{
                let _a=new Array();
                for (let i in resultRow){
                    _a.push(resultRow[i]);
                }
                let _temp={name:'', number:'', pay:'',  adress:''};
                _a.push(_temp);
                createTableHeader(_a);
            }

        })

       $('#shanchu').click(function () {
           var m=$('#tabel_con').datagrid('getSelections');
           var index=$('#tabel_con').datagrid('getRowIndex',m[0]);

           console.log(index);
       })


   })
   function createTableHeader(data){
       $("#tabel_con").datagrid({
           singleSelect : false,
           width : 900,
           iconCls : 'icon-edit',
           rownumbers : false,
           data:data,
           striped : true,
           fitColumns : true,
           freezeRow : 0,
           loadMsg : "正在加载数据",
           columns : [
               [
                   {
                       "field" : "fk",
                       "checkbox" : 'true',
                   },
                   {
                       "field" : "name",
                       "title" : "姓名",
                       "width" : 80,
                       "editor":"text"
                   },{
                   "field" : "number",
                   "title" : "编号",
                   "width" : 80,
                   "editor":"text"
               },{
                   "field" : "pay",
                   "title" : "绩效",
                   "width" : 80,
                   "editor":"text"
               },
                {
                       "field" : "address",
                       "title" : "住址",
                       "width" : 80,
                       "editor":"text"
                   }]
           ],
           onClickCell: onClickCell,
           //编辑单元格之后触发
           onAfterEdit: function(rowIndex, rowData, changes){ //定义编辑后的事件
               /*for(var i in resultRow){
                   if(resultRow[i].id == rowData.id){
                       resultRow[i] = rowData;
                   }
               }*/
               resultRow[rowIndex]=rowData;
               /* resultRow.push(rowData)*/
               createTableHeader(resultRow);
           },
           onRowContextMenu: function(e, rowIndex, rowData){ //定义编辑后的事件
               $('#tabel_con').datagrid('endEdit',rowIndex);
           },
           /*onClickRow:function (rowIndex, rowData) {
               $('#tabel_con').datagrid('endEdit',rowIndex);
           }*/
           /*onLoadSuccess : function(data) {
               $('#tabel_con').datagrid('clearSelections');
           }*/
       });
   }

   //编辑easyui单元格的方法
   $.extend($.fn.datagrid.methods, {
       editCell : function(jq, param) {
           return jq.each(function() {
               var opts = $(this).datagrid('options');
               var fields = $(this).datagrid('getColumnFields', true).concat($(this).datagrid('getColumnFields'));
               for (var i = 0; i < fields.length; i++) {
                   var col = $(this).datagrid('getColumnOption', fields[i]);
                   col.editor1 = col.editor;
                   if (fields[i] != param.field) {
                       col.editor = null;
                   }
               }
               $(this).datagrid('beginEdit', param.index);
               for (var i = 0; i < fields.length; i++) {
                   var col = $(this).datagrid('getColumnOption', fields[i]);
                   col.editor = col.editor1;
               }
           });
       }

   });

   var editIndex = undefined;
   function endEditing() {
       if (editIndex == undefined) {
           return true
       }
       if ($('#tabel_con').datagrid('validateRow', editIndex)) {
           $('#tabel_con').datagrid('endEdit', editIndex);
           editIndex = undefined;
           return true;
       } else {
           return false;
       }
   }
   //点击单元格触发的方法
   function onClickCell(index, field, value) {
       if (endEditing()) {
           $('#tabel_con').datagrid('selectRow', index).datagrid(
                   'editCell', {
                       index : index,
                       field : field
                   });
           editIndex = index;
       }
   }

</script>
</html>

不掉头发的攻城狮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
esay ui 数据表格动态添加删除行

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><link rel="stylesheet" type="text/css" href="../js/jqu...
复制链接

扫一扫

专栏目录