KingFusion系列33-如何向数据表格末尾追加一行新数据
今天在使用KingFusion时在程序中看到这么一句代码：
$(Datagrid1.id).datagrid('appendRow',{'c_SampleOrder': i+1});通过向AI学习了解到该语句的意思，于是将该知识点整理添加到Obsidian个人知识库中；
代码整体功能
这是jQuery EasyUI 框架中 DataGrid 数据表格组件的操作代码，核心作用是：向指定 ID 的数据表格末尾追加一行新数据，并给c_SampleOrder字段赋值为i+1。
逐段拆解解析
1. 选择器部分：$(Datagrid1.id)
Datagrid1是一个原生 DOM 元素对象（通常对应页面中的
<table>标签元素），.id是 DOM 原生属性，用于获取该元素的id属性值（字符串格式）。$()是 jQuery 的核心选择器，整句等价于
$("#" + Datagrid1.id)，即通过 ID 选中表格的 jQuery 对象，为后续调用 EasyUI 组件方法做准备。示例：如果页面表格为
<table id="sampleGrid"></table>，且Datagrid1 = document.getElementById('sampleGrid')，那么Datagrid1.id的值就是字符串sampleGrid，$(Datagrid1.id)等价于$('#sampleGrid')。
2. 方法调用：.datagrid('appendRow', ...)
.datagrid()是 jQuery EasyUI 为表格元素扩展的组件方法，有两种核心用法：传入配置对象：用于初始化表格（定义列、数据源、分页等）
传入方法名字符串 + 参数：调用表格的内置操作方法
'appendRow'是 DataGrid 的内置行操作方法，固定作用是在表格本地数据集的末尾追加一行新记录。
3. 行数据参数：{'c_SampleOrder': i+1}
这是appendRow方法的入参，是一个 JSON 对象，代表新行的字段与对应值：
键
c_SampleOrder：必须和 DataGrid 初始化时columns配置里的field属性完全一致（大小写敏感），对应表格中的某一列（通常是序号列）。值
i+1：给该字段赋的具体值。i一般是循环计数器变量，i+1常用于实现序号从 1 开始自动递增。
关键注意事项
- 依赖前提
：页面必须先引入 jQuery 库和 jQuery EasyUI 库，否则
.datagrid()方法不存在，会直接抛出 JS 错误。 - 字段匹配
：
c_SampleOrder必须与表格初始化的列字段名完全一致，否则新行的该列会显示空白。 - 变量要求
：
i必须是已定义的数值型变量，否则会抛出i is not defined错误。该写法几乎都用于循环批量追加多行的场景。 - 分页影响
：
appendRow是向表格的本地数据集追加数据；若表格开启了分页，新行会计入总数据量，显示在最后一页的末尾。 - 常见坑点
：如果
Datagrid1是 jQuery 对象而非原生 DOM，Datagrid1.id会是undefined，导致选择器失效。jQuery 对象获取 ID 需用Datagrid1.attr('id')。
完整场景示例
// 1. 初始化EasyUI DataGrid $('#sampleGrid').datagrid({ columns: [[ { field: 'c_SampleOrder', title: '序号', width: 80 }, { field: 'sampleName', title: '样品名称', width: 200 } ]], data: [] // 初始空数据 }); // 2. 原生DOM元素变量（对应你代码中的Datagrid1） var Datagrid1 = document.getElementById('sampleGrid'); // 3. 循环追加5行数据（典型使用场景） for (var i = 0; i < 5; i++) { $(Datagrid1.id).datagrid('appendRow', { 'c_SampleOrder': i + 1, 'sampleName': '样品' + (i + 1) }); }