【JQuery】创建动态表格（使用部分easyui组件）

一直用easyui创建表格，忽然要用到jquery的时候真的是很不熟悉，在各种试错中浪费了很多时间，好在终于也是接近尾声了，接下来把思路理一理。

以下分别为原型图和效果图，数据为后台获取，动态生成的：

思路1

• 之前的表格使用的都是easyui datagrid，这次也想使用easyui datagrid。注意这种复杂表头的定义，对于“出发”，“到达”等这种并没有实际对应值的列，需要定义：field: ''，否则表头是不能正常显示的。
• 表的内容也可以调取查询方法正常显示。
• 对于表尾，可以使用footer来定义统计列，
• 问题： 对于之后的总额这行没有办法定义，所以这个表格无法使用easyui datagrid进行渲染。

思路2

• 使用 thead, tfoot, tbody在html中画出表格结构，其中thead和tfoot是直接在html中定义好的，tbody部分的内容需要在js中动态生成。每个单元格都包含一个input框，其中项目列为组合框，设置好对应的包含行索引的id。
• 需要调用部分easyui组件。easyui numberbox以及easyui combogrid以及easyui datetimebox（该日期时间框取值的时候，日期与时间之间会出现一个+，要处理掉）。
• 在表格初始化完成后，点击某个单元格，再将该单元格调用为对应的easyui组件，取值是js遍历每行每列取每一个input框的值，针对于这些组件，该值并不存在于初次定义好的input框中，所以考虑使用jquery取值。
• 问题： 该种加载方式，使用jquery选择器取值，一直报错，并未取到对应值。考虑是因为同列input框有的经过点击再次加载为对应的easyui组件了，有些没有，实际上并不太好取值。

思路3

• js中，在加载好每一行的tr后直接将所需要的input框直接初始化为easyui组件，解决了取值的问题。

思路4

• 新增和修改：新增时增加一行空白行。
• 问题： 在进行保存操作时，该表数据为明细表数据，由于新增时传入的主表id为空，故而保存且表格未刷新时，数据依然正确显示，但是在继续进行修改保存操作时，会出问题。
• 故而在保存之后，会查询到主表id，并且以主表id为条件，重新进行查询数据，渲染表格

思路5

• 清空操作：遍历清空
• 删除操作：radio选中的该行数据进行删除。
• 对于未保存的数据进行删除，需要将之后的每一行的行索引减1，否则行索引不连续，保存的时候会出现问题。
• 对于已保存过的数据进行删除，需要先在表格中进行删除操作，再进行以上操作。

涉及到的需要积累的jquery方法

append()
find()
split()
indexof()
attr()
ajax()

涉及到的input框事件

onblur  //失去焦点触发
onchange  //值改变触发
onkeyup  //键盘监听