jQuery EasyUI Datagrid列操作：传递参数到JS方法

"jQuery EasyUI Datagrid列设置与参数传递" 在jQuery EasyUI框架中，Datagrid是一个非常实用的组件，用于展示表格数据并提供多种交互功能。在使用Datagrid时，我们有时需要自定义列的显示方式，比如将某一列设置为超链接或按钮，以便在用户点击时执行特定的操作。在给定的描述和代码片段中，展示了一个如何在Datagrid的一列中创建按钮，并在点击时向JavaScript方法传递参数的方法。 首先，Datagrid的`columns`属性用于定义列的结构和样式。在给出的示例中，有三列：`dirName`（目录名），`dirDirectory`（目录路径）和一个未命名的列，用于放置按钮。未命名的列设置了`formatter`函数，这个函数允许我们自定义单元格的显示内容。 ```javascript {field: 'QINGLI', title: '', width: 70, align: 'center', formatter: function(value, rec) { var pa = rec.dirDirectory; return "<input type='button' name='clean' onclick='cleanDir('" + pa + "')' value='' />"; } }, ``` 在这个`formatter`函数中，我们首先获取当前行的`dirDirectory`值，然后构建一个`<input>`标签，类型为`button`，并且设置了一个`onclick`事件。事件处理函数`cleanDir`会接收到一个参数，即`dirDirectory`的值。这样，当用户点击这个按钮时，`cleanDir`函数就会被调用，并且传入对应的目录路径。 在HTML中，`onclick`属性内联定义了JavaScript代码，`cleanDir`是需要调用的函数名，`'"+pa+"'`则是将变量`pa`的值插入到字符串中，形成完整的参数。这种内联方式虽然方便，但在大型项目中不推荐使用，因为可能导致代码混乱和难以维护。更好的做法是使用事件监听器来绑定函数，例如使用`addEventListener`。 要实现相同的功能但避免内联JavaScript，可以这样做： ```javascript {field: 'QINGLI', title: '', width: 70, align: 'center', formatter: function(value, rec) { var pa = rec.dirDirectory; var button = document.createElement('input'); button.type = 'button'; button.name = 'clean'; button.value = ''; button.dataset.path = pa; // 使用data-*属性存储参数 button.addEventListener('click', function() { cleanDir(this.dataset.path); }); return button.outerHTML; } }, ``` 这种方式将参数存储在按钮的`data-path`属性中，并通过事件监听器绑定`cleanDir`函数。这样，代码更清晰，也易于维护。 总结起来，jQuery EasyUI Datagrid中的`formatter`函数允许我们自定义列的显示内容，通过内联`onclick`或者事件监听器的方式，我们可以传递参数给自定义的JavaScript方法，实现更丰富的交互功能。在实际开发中，应根据项目需求和代码规范选择合适的方式来实现。