EasyUI中的Formatter

2024-08-25 14:58
文章标签 easyui formatter

本文主要是介绍EasyUI中的Formatter,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

    EasyUI现在项目中的使用频率很高,几乎每个页面都在使用,而其中的 datagrid是使用频率最高的今天要总结的不是datagrid而是其下的Formatter。Formatter是datagrid中单元格的格式化函数,目的之让数据按照用户的习惯更好的显示出来。一般在使用时有三个参数(value,row,index),在最初接触到这个函数时是在人事系统中用它来格式化显示时间,当时使用的很模糊,对它的三个参数到底是用来表示什么的不是很清楚,现在有在项目中用到这个函数来格式化的显示单元格中内容,用法大同小异,自己做一下总结。
    首先先要了解的是它的三个参数到底代表了什么,最直观的就是在页面上的显示。如下的代码,在“审核状态”这一列使用了Formatter函数,这一列要显示的内容是通过URL调用findAllCourse()的方法返回的的courAuditState的值。
function initTable(queryData) {$('#dg').datagrid({  url: 'course/findAllCourse',idField: 'id',columns: [[{title:'讲师ID',field:'studentId',sortable:true,hidden:true},{title:'课程名称',field:'courseName',sortable:true,width:30,},{title:'创建时间',field:'versionStartTime',sortable:true,width:30,},{title:'审核状态',field:'courseAuditState',formatter: function (value, row, index) { return State(value, row, index)}},]]});
}
//formatter调用的方法
function State(value, row, index){
}
Value
    不在state中写任何的方法,在该列默认显示的是value值,也就是从数据库中查询到的保存在库中的原始值,但是存在库中的值往往是我们在编程时使用的具有一定意义的代号,例如在本次使用的项目中“审核状态”在库保存的是0,1,2这些有一定意义的数字,但是在前台显示时用户是无法理解这些数字的意义的,所有我们就需要借用Formatter这样的格式化函数让数据显示为用户期望的容易理解的内容。

在State这个function中添加如下的代码,通过对原始value值得判断转换为容易理解的汉字。
function State(value, row, index){if (value == "0") {return '<font>审核中</font>';}else if(value == "1"){return '<font>审核成功</font>';}else if(value == "2"){return '<font>审核失败</font>';}
}
   看一下效果图(右图为转换后的效果)
Index
Index和我们平时理解的index是一样的,就是从0开始的一个标识,在State这个函数中添加如下的代码
function State(value, row, index){return '<span style="color;red" >' + index + '</span>';	
}
这样在页面上显示的就是index的值, 在datagrid中每一页中的index都会从0开始,主要是用来标注每一页每一行记录的。 看一下效果图

row
        row表示的是datagrid中当前行的,它包含了当前行所有字段的信息,如果要获得可以直接的使用title中的field的关键字,例如在state的函数中添加如下的代码,其中rows.versionStartTime中的versionStartTime是在datagrid中columns的title的值,row之后也可以是其他任意的title的值:
<span style="font-size:18px;">function State(value, row, index){return '<span style="color;red" >' + row.versionStartTime+ '</span>';			
}</span>
   显示效果如下,在审核状态列显示的内容和创建时间相同
小结
       
        Formatter的应用很简单效果也很好,在最初接触的时候只是简单的应用也并没有用到里面的参数,不懂得它们的还以和用法再次碰到对它有了进一步的了解,不是什么技术难点只是想告诉自己很多东西不是你听多了看的眼熟就是会了,很多东西值得深入研究和学习。

这篇关于EasyUI中的Formatter的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1105872

相关文章

easyui同时验证账户格式和ajax是否存在

accountName: {validator: function (value, param) {if (!/^[a-zA-Z][a-zA-Z0-9_]{3,15}$/i.test(value)) {$.fn.validatebox.defaults.rules.accountName.message = '账户名称不合法(字母开头,允许4-16字节,允许字母数字下划线)';return fal

easyui 验证下拉菜单select

validatebox.js中添加以下方法: selectRequired: {validator: function (value) {if (value == "" || value.indexOf('请选择') >= 0 || value.indexOf('全部') >= 0) {return false;}else {return true;}},message: '该下拉框为必选项'}

easyui 选中行在按一次取消选中

<table id="dg" style="height:100%" ></table><script>$(function () {var columns=[{field:'name',title:'菜单名称',width:200,align:'left'},{field:'app',title:'应用名称',width:100,align:'left'},{field:'controller

Jquery EasyUI 弹出div对话框引入其他页面(iframe)

//url:窗口调用地址,title:窗口标题,width:宽度,height:高度,shadow:是否显示背景阴影罩层function showMessageDialog(url, title, width, height, shadow) {var content = '<iframe src="' + url + '" width="100%" height="99%" framebord

easyui 重复提交url

就我所知,原因有二: 一:重复初始化 1、传统方式 查看文本 打印  1  $(function () {    2             var url = "../Source/Query/jhDataQry.ashx?action=query";    3             $(dg).datagrid({    4

jQuery EasyUI基础组件(panel,window,dialog)

在这里我们首先要理解Jquery组件之间的关系,理解Jquery的两种写法。理解动态加载组件的方法,但是不推荐使用 动态加载 easyloader.js  解析标签里的class值使用jquery parser.js      首先我们讲解panel面板,例如网页上的最大化,最小化,关闭按钮,他们是怎么实现的呢。 用$.fn.panel.defaults重写defaults。

jQuery EasyUI 表单

jQuery EasyUI 表单 - 创建树形下拉框 树形下拉框(ComboTree)是一个带有下列树形结构(Tree)的下拉框(ComboBox)。它可以作为一个表单字段进行使用,可以提交给远程服务器。 在本教程中,我们将要创建一个注册表单,带有 name、address、city 字段。city 字段是一个树形下拉框(ComboTree)字段,在里面用户可以下拉树面板(tree pan

JQuery EasyUI环境的搭建

JQueryEasyUI搭建环境 1、下载JqueryEasyUI包 http://www.jeasyui.com/download/index.php 2、打开MyEclipse创建WebProject。 3、将下载下来的JqueryEasyUI包解压后放到到WebRoot下。如下图所示 二、包含文件        新建一个header.jsp文件,将需要用到的Jq

JQuery EasyUI表单-表单验证

jQuery EasyUI 表单 - 表单验证 本次将向您展示如何验证一个表单。easyui框架提供一个 validatebox插件来验证一个表单。在本教程中,我们将创建一个联系表单,并应用 validatebox插件来验证表单。然后您可以根据自己的需求来调整这个表单。 创建表单(form) 让我们创建一个简单的联系表单,带有 name、email、subject 和 message

js-模拟easyui-datagrid表格各行选中事件-实现逻辑

鉴于easyui-datagrid一旦使用于大数据,则会非常卡顿,这里模仿easyui-datagrid实现行选中事件的逻辑 var tableObj = {domIdName:'actCarTable',data:[],//表格数据isSelectedTrIndex:[],//被选中行的索引isDblclick:null,//是否双击selectRowArr:[], //选中行数据数