<!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" οnclick="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' οnclick='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>