easyui datagrid 增删行 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="gb2312"/>
    <title>增加，删除行</title>
      <link rel="stylesheet" type="text/css" href="../easyui-ku/themes/default/easyui.css"/>
      <link rel="stylesheet" type="text/css" href="../easyui-ku/themes/icon.css"/>
      <link rel="stylesheet" type="text/css" href="../easyui-ku/themes/demo.css"/>
      <script type="text/javascript" src="../easyui-ku/jquery.min.js"></script>
      <script type="text/javascript" src="../easyui-ku/jquery.easyui.min.js"></script>

    <script type="text/javascript">
       var temp="10";
    </script>
  </head>
  <body>
    <table id="dg" class="easyui-datagrid"  style="width:400px;height:250px"> </table>
    <input type="button" value="ADD" onclick="addRow()"/>
    <script type="text/javascript">
      $(function(){ 
            $('#dg').datagrid({
                columns:[[    
                    {field:'name',title:'Name',width:80,sortable:true},    
                    {field:'age',title:'Age',width:80,sortable:true},    
                    {field:'note',title:'Note'},
                    {
                        field:'opt',title:"delete",width:100,align:'center',
                        formatter:function(value,row,index){
                           var str="<a href='javascript:void(0)' class='opt_remove' onclick='deleteRow(\""+index+"\")'>删除</a>";
                           return str;
                        }
                    }
                ]],
              onLoadSuccess: function (data) {
                    $(".opt_remove").linkbutton({ iconCls: "icon-remove", plain: 'true', width: 20 });                  
                },
            });
      })();
     
    function selectCurRow(obj){  
        var $a = $(obj);  
        var $tr = $a.parent().parent().parent();  
        var tmpId = $tr.find("td:eq(0)").text();  
        $obj.datagrid('selectRecord', tmpId);  
    } 

        function getIndexAfterDel(){  
        var selected = $obj.datagrid('getSelected');  
        var index = $obj.datagrid('getRowIndex', selected);  
        return index;  
    }  

      function addRow(){

         // 在第二行的位置插入一个新行
        $('#dg').datagrid('insertRow',{
            index: 1,    // 索引从0开始
            row: {
                name: '新名称',
                age: temp,
                note: '新消息'
            }
        });
        temp= temp + "1";
        var rows = $('#dg').datagrid("getRows");
         $('#dg').datagrid("loadData", rows);

      }

      function deleteRow(obj)
      {
         $('#dg').datagrid('deleteRow', obj);  
        var rows = $('#dg').datagrid("getRows");
         $('#dg').datagrid("loadData", rows);
      }
    </script>
  </body>
</html>

 

posted @ 2017-06-28 08:51  TZB_007  阅读(267)  评论(0)    收藏  举报