跨页多选或全选删除数据

[{"insert":"使用分页组件对数据进行分页显示，选中的数据用数组暂时单独存储，便于判断选择及取消选择后的各种状态。前端有个“后台数据”数组，是模拟了后台数据库的数据"},{"insert":{"image":"//file3.ih5.cn/v35/files/5c11004cf4423c71bab87dae69ffc6b9_1283_199_29.png"}},{"insert":"。使用demo的时候可以根据需求接入数据库\n\n1、单条数据的选择和取消\n"},{"insert":{"image":"//file3.ih5.cn/v35/files/6bcafa68261ba3c87888d18ff70ae52c_59710_966_505.png"}},{"insert":"\n\n2、全选及取消全选\n"},{"insert":{"image":"//file3.ih5.cn/v35/files/def958397e32fad519731bb35871e061_77144_1117_611.png"}},{"insert":"\n\n3、当前页面逐条全部选择完毕之后，或逐条全部取消完毕之后，全选按钮的显示情况\n"},{"attributes":{"width":"201"},"insert":{"image":"//file3.ih5.cn/v35/files/a79b787affff849c43ac9164b0fcf74e_31944_371_633.png"}},{"insert":" "},{"attributes":{"width":"196"},"insert":{"image":"//file3.ih5.cn/v35/files/17ae20634d0ab94d13a112ff201d5530_32006_357_614.png"}},{"insert":"\n勾选完最后一个待选项，全选按钮自动选中。反之，只要在全选状态取消任意一个选项，全选按钮变未选中\n\n4、删除全部已选项时，点击删除按钮，可以获取到需删除数据的数据ID，并对数据进行删除。此案例因为是纯前端，所以只做了数据逻辑，如果涉及到后台，可以根据返回的数据ID对后台数据进行相应的操作处理\n"},{"insert":{"image":"//file3.ih5.cn/v35/files/3b414974dce12bcd8e19dc266ea932b1_28000_376_611.png"}},{"insert":"\n\n\n注意：复选框状态的判断里面涉及到两个一维数组的比较，该案例中因为数组内是数值，所以我们可以先把数组按照从小到大的顺序用sort()函数进行排序，然后转换成字符进行比较\n"},{"insert":{"image":"//file3.ih5.cn/v35/files/08f9d78c91dc2a3c52e60dc3c1035fef_63634_982_518.png"}},{"insert":"\n"}]

[{"insert":"一个跨页多选/全选的界面：\n"},{"attributes":{"width":"361"},"insert":{"image":"//file3.ih5.cn/v35/files/46d265aaec63ac1ca7e0f75f82cc3024_33341_800_356.png"}},{"insert":"\n\n需求：\n1、数据分为多页，每页都可以多选，或者最后一个按钮是全选当页的数据；\n2、点删除按钮，可以删除当前所有选中的行；\n3、原始数据结构，要模拟数据库中输出的数据结构，需要有个数据ID（但不需要接数据库，做成纯前端即可），然后删除的时候，要console log一下被删除的数据ID数组，方便用户自己去对接数据库。\n"}]