一（从网上找的别人的）、
通过formatter方法给Jquery easyui 的datagrid 每行增加操作链接
我们都知道Jquery的EasyUI的datagrid可以添加并且自定义Toolbar，这样我们选择一行然后选择toolbar的相应按钮就可以对这行的数据进行操作。但实际项目里我们可能需要在每行后面加一些操作链接，最常见的就是比如“修改”、“删除”、“查看”之类。如下图：
解决方法：
第一步，我需要 在datagrid行里添加一列，field指向id（field:'id'），然后对这列进行格式化处理（formater：格式化函数），如下：
- <th data-options="field:'id',width:180,formatter: rowformater">操作</th>
第二步：
根据documentation的描述，formatter的格式化函数有3个parameters，分别是：
value: the field value，也就是field:'id'。
rowData: the row record data。就是这一行的Json数据，包括你已经选择在Datagrid上显示的内容，和没显示的内容。因为我的Json数据里包括了Id这一内容，所以 我可以直接调用。如果你作为数据源的Json里没有Id属性，需要修改一下Json的输出。我的每行Json输出是类似 {"id":"1","name":"\u7ecf\u6d4e\u53d1\u5c55","parentId":"0"}的结构
rowIndex: the row index.当前行的Index。
所以我写rowformater这个函数的时候，也需要用function rowformater(value,row,index)的方法。为了看起来清晰明白，我只在函数里写了一句话（放在<head>标签里），事实上项目上需要做一些基本的判断。：
- <script type="text/javascript">
- function rowformater(value,row,index)
- {
- return "<a href='"+row.id+"' target='_blank'>操作</a>";
- }
- </script>
二、添加链接（自己的）：
<th data-options="field:'action',width:100" formatter="formatAction">操作</th>
<script type="text/javascript">
function formatAction (value,row,index){
var val="";
if(row.disabled==1){
val="<a href='javascript:void;' class='delete' onclick='if(confirm(\"是否禁用？\")){dis("+row.store_id+")}' title='禁用'></a>";
}else if(row.disabled==2){
val="<a href='javascript:void;' class='edit' onclick='if(confirm(\"是否还原？\")){revert("+row.store_id+")}' title='还原'></a>";
}
val+="<a href='javascript:void(0);' class='edit' onclick='append("+row.store_id+",\"uname\")' title='修改'></a>";
return val;
}
function dis(storeId){
$("#form").ajaxSubmit({
url:"../store!disStore.do?storeId="+storeId,
dataType:"json",
success:function(data){
if(data.result==1){
alert(data.message);
location.reload();
}
else{
alert(data.message);
}
}
});
}
相关推荐
在描述中提到的“支持formatter格式化数据的打印”，指的是Datagrid中用于数据美化和转换的formatter函数。Formatter允许开发者自定义单元格显示的内容，例如日期格式化、货币格式化或链接生成等。在打印时，我们...
在创建数据表格的配置对象中，我们为需要格式化的列定义一个`formatter`属性。这个属性是一个JavaScript函数，接收两个参数： 1. `value`：当前列对应的数据值。 2. `record`：当前行的完整数据记录对象，包含了...
- `formatter`：格式化显示的日期格式。 - `parser`：解析输入的日期格式。 - **事件** DateBox 还支持多个事件监听，如 `onSelect`，当用户选择了某个日期时触发。 - **方法** DateBox 提供了一些实用的...
例如，在上述代码示例中，我们看到了如何使用formatter属性来定义一个格式化函数，该函数能够将Json中的时间数据转换为"yyyy-MM-dd"格式的字符串。这样前台在展示数据时就可以正确显示时间了。具体实现方式是在...
EasyUI 是一个基于 jQuery 的前端框架，主要用于构建用户界面，尤其在企业级Web应用中广泛应用。它提供了丰富的组件，如对话框、表单、菜单、布局等，而 Datagrid 是 EasyUI 中的一个重要组件，用于展示和管理表格...
总结来说，jQuery EasyUI 实现列的格式化主要通过设置 datagrid 列的 `formatter` 属性，并定义相应的格式化函数。函数接收列的原始值和整行数据，然后返回格式化后的内容。为了使格式化功能正常工作，确保函数定义...
- `dataGrid` 可以通过 `onLoadSuccess` 事件来处理数据加载成功后的操作，例如对数据进行格式化或者触发其他 UI 更新。 6. **自定义功能**： - 通过 `onClickRow` 和 `onDblClickRow` 事件，可以实现行点击或...
formatter属性允许开发者定义一个函数，该函数会对DataGrid中对应列的数据进行自定义的格式化处理。在这个函数中，可以根据实际需要对显示的内容进行处理，例如将数字转换为相应的文字描述。 上述代码段中，通过...
接下来，我们需要找到`formatter`方法所在的位置，`formatter`是用来格式化数据显示的。原代码可能是这样的： ```javascript else { if (col.formatter) { cc.push(col.formatter(_1df, _1dc, _1db)); } else { ...
- `formatter`: 用于格式化日期显示的函数。 - `parser`: 用于解析输入值的函数。 **事件** DateBox 支持`onSelect`事件，当用户选择一个日期时触发。 **方法** DateBox 提供了`setValue`、`getValue`和`clear`...
##### 知识点7：格式化DataGrid列 - **概念**：根据特定规则对数据格中的列进行格式化显示。 - **实现方法**：在列定义中使用`formatter`函数。 ##### 知识点8：添加排序到DataGrid - **概念**：实现按列排序的功能...
- `formatter`：日期格式化函数。 - `parser`：日期解析函数。 - `editable`：是否允许直接编辑日期框。 - `required`：是否必须选择一个日期。 **2.3 事件** - `onSelect`：当用户选择日期时触发。 - `onOpen`：...
通过 `formatter` 函数，可以对某一列的数据进行格式化处理，实现自定义显示效果。 7. **行操作**： Datagrid 支持添加、删除、更新行的操作，通常配合服务器端的 CRUD 操作实现。例如，`addRow` 方法用于添加新...
**2.4 自定义格式化和解析函数** 为了自定义日期显示格式，可以使用 formatter 和 parser 属性： ```javascript function myFormatter(date) { var y = date.getFullYear(); var m = date.getMonth() + 1; var ...
表头定义了各列的显示字段、宽度、对齐方式和格式化函数。 总结而言，jQuery EasyUI 1.4版本为前端开发者提供了一套完整的、易于使用的工具集，大大降低了开发复杂UI的难度，同时也提供了中文文档以便更好地服务于...