使用场景:
今天在公司开发时,有这样一种情况,我已经通过AJAX实现批量删除的功能。但实现的方式是多次调用AJAX,每次删除一条,删除后,在页面上直接再把行tr.remove掉。但这种方式浪费服务器资源。因此现在需要改为,一次获取所有的Id,同时一次AJAX调用批量删除掉记录。
那么问题来了,批量删除后如何刷新页面,有两种方案:1)AJAX调用后,返回成功的ID,把成功的ID对应的行,Remove掉,但这样改变原来公司程序结构模式,所以暂时不考虑了。2)AJAX调用后,返回成功后,直接再模拟点击“查询”的功能。
先上前端代码:1.在程序显示列表的HTML标签中,先标注后要访问的元素。
代码中:
1)id=“chkSelectAll”用于全选 复选框2)id=chkSet 用于单行的复选框3)id=“h_unique_id”用于找到该行对应的数据库的Id
2.在程序的 代码中,我们把重要的 拿出来说明:
1)在顶部,找到表格class名为table_style_2,td里的checkbox控件,如果没有checked,则忽略。否则就通过find 找到id的值,并存入uniqueIds中
接着调用Ajax进行批量删除。
2)如果不成功则弹出出错信息,如果成功,这里调用服务器控件生成的ID的控制,去模拟查询点击事情。
至此,就实现了批量删除在前端更新数据的功能。