EasyUI——DataGrid删除最佳方案

思路1：Ajax传送要删除的行号给后端，后端删除，返回结果，前端接收到结果弹出成功，重新加载

这个方法存在一个问题，影响到了用户体验（必须等服务器返回

其实不必如此

思路2：Ajax传送要删除的行号给后端，前端完成删除效果

这样就省略了后面两个步骤，前端其实不需要等待你告诉我删除是否成功，反正我告诉你我要删除了，你什么时候好我不关心

效果图：

代码：

<!doctype>

< html>

< head>

< title>EasyUI DataGrid</ title>

< link rel= "stylesheet" type= "text/css" href= "EasyUI/themes/default/easyui.css" />

< link rel= "stylesheet" type= "text/css" href= "EasyUI/themes/icon.css" />

< script type= "text/javascript" src= "EasyUI/jquery.min.js"></ script>

< script type= "text/javascript" src= "EasyUI/jquery.easyui.min.js"></ script>

< script>

$(document). ready( function(){

$( '#dd'). datagrid({

url: 'datagrid_data.json',

frozenColumns: [[{ field: 'ck', checkbox: true }]],

columns:[[

{field: 'name',title: 'name',width: 100},

{field: 'pwd',title: 'pwd',width: 100},

{field: 'bir',title: 'bir',width: 100}

]],

toolbar:[{

iconCls: 'icon-cancel',

handler: function(){

var row = $( '#dd'). datagrid( 'getChecked');

row. forEach( function( element){

var index = $( '#dd'). datagrid( 'getRowIndex',element);

$( '#dd'). datagrid( 'deleteRow',index);

$. get( "Handler/HandlerGrid.ashx", {mode: 'DEL', row: index });

});

}

}],

});

})

</ script>

</ head>

< body>

< div id= "dd"></ div>

</ body>

</ html>