jquery easyui中的formatter多用法

1.formatter能多数据进行格式化后输出,formatter必须返回一个字符串,第一个用法:当一个单元格的数据很多,不能显示完全时,鼠标放上去能动态显示出所有内容。

formatter:function(value,rowData,rowIndex){
    //value是当前字段的值,rowData是该行的所有数据,rowIndex是该行的索引
    return ‘<span title="‘+value+‘">‘+value+‘</span>‘;

}

2.在表格中定义带按钮的一行操作列

columns:[[
    {
        title:‘控制‘,
        field:‘id‘,
        width:150,
        formatter:function(value,rowData,rowIndex){
        //value是当前字段的值,rowData是该行的所有数据,rowIndex是该行的索引
        return ‘<button onclick="show(‘+rowIndex+‘);">编辑</button><button onclick="show(‘+rowIndex+‘);">删除</button>‘;

        }

    }

]]

functon show(index){
    var rows= datagrid.datagrid(‘getRows‘);//得到所有的行,是一个数组
    console.info(rows[index]);//通过rows[index]就能得到该行的数据了
}

传数据时要传索引,因为rowData是一个对象,不能传过去。

3.格式化日期:

先扩展jquery的日期格式

Data.prototype.format=function(format){
    if(isNaN(this.getMonth)){
        return ‘‘;
    }
    if(!format){
        format="yyyy-MM-dd hh:mm:ss";
    }

    var o={

        /* month*/
        "M+":this.getMonth+1,
        "d+":this.getDate(),

        "h+":this.getHours(),

        "m+":this.getMinutes(),

        "s+":this.getSeconds+1,

        "q+":Math.floor((this.getMonth()+3/3)),
        "S+":this.getMilliseconds()
    };
    if(/(y+)/.test(format)){
        format=format.replace(RegExp.$1,(this.getFullYear()+"").substr(4-RegExp.$1.length));
    }
    for(var k in 0){
        if(new RegExp("("+k+")").test(format)){
            format=format.replace(RegExp.$1,RegExp.$1.length==1?0[k]:("00"+0[k]).substr((""+o[k]).length));

        }
    }
    return format;
}

调用方式:

formatter:function(value){
        //value是当前字段的值
        return new Date(value).format();

        }
时间: 2025-01-07 01:29:04

jquery easyui中的formatter多用法的相关文章

jQuery easyUI中的EasyLoader的使用

jQuery easyUI中的EasyLoader的使用 下面用一个简单的案例来介绍一下EasyLoader的使用: 1.首先创建一个web项目 2.到官网下载jQuery easyUI插件,并将其放到项目对应的包下: 3.将创建的项目部署到tomcat上或者是其他web服务器上 案例的实现截图: 案例相关代码:EasyLoader.jsp <%@ page language="java" contentType="text/html; charset=utf-8&qu

jQuery EasyUI中经常遇到的问题(FAQ)

1.easyui弹出页面中无法引入其他外部js文件的问题 easyui弹出的对话框如果为jsp.html页面,easyui只会将这些页面中的<body></body>内部的内容显示,其他内容将丢失,如果你的js引用刚好放在<head></head>中,那么不好意思,这些js是无法成功引用的.解决方法就是将js文件的引用放在<body></body>中. 2.validatebox不生效 如果遇到这种问题,看下是不是你的控件(<i

Jquery easyui中的有效性检查

使用过程中的一积累,备查. EasyUI 验证框使用方法: //*************************** missingMessage:未填写时显示的信息 validType:验证类型见下示例 invalidMessage:无效的数据类型时显示的信息 required="true" 必填项 class="easyui-validatebox" 文本验证 class="easyui-numberbox" 数字验证 **********

jQuery EasyUI中文文档

中文文档:jQuery EasyUI 1.2.4 API 中文文档(完整)目录 http://www.cnblogs.com/Philoo/archive/2011/11/17/jeasyui_api_index.html 英文官方文档: http://www.jeasyui.com/documentation/ 日历控件datebox的清空: $('#your_batebox_id').datebox('setValue',''); 下拉列表的清空: $("#your_combbox_id&q

jQuery EasyUI NumberBox(数字框)的用法

这里的options是选项,可以参考下表: 选项名 类型 描述 默认值 min 数字 文本框中可允许的最小值 null max 数字 文本框中可允许的最大值 null precision 数字 最高可精确到小数点后几位 0 例如:金额输入框 最大值为“99999.99” 精确到两位小数. <input name="money" id="money" type="text" class="easyui-numberbox"

easyui中parser的简单用法

在easyUI中,parser是在页面加载完成之后自动加载,将代码根据class渲染为不同的插件.除了自动加载之后,编程人员还可以使用手动调用的方式,比如$.parser.parse("#id")的方式进行调用,这样就可以允许编程人员根据不同需求动态加入不同的插件的代码,再使用该段代码的唯一id,利用parser进行渲染,比如插入插件代码至页面,代码如下: <div class="easyui-accordion" id="tt">

jQuery EasyUI, datagrid, treegrid formatter 参数比较 row index

如题: datagrid中,见官方文档: formatter function The cell formatter function, take three parameter:value: the field value.rowData: the row record data.rowIndex: the row index. undefined 例子: {field:'id',title:'id',width:100,align:'center',formatter:function(va

Jquery EasyUI 中ValidateBox验证框使用讲解

Validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效.如果用户输入了无效的值,它将会更改输入框的背景颜色,并且显示警告图标和提示信息.该验证框可以结合form(表单)插件并防止表单重复提交. 使用$.fn.validatebox.defaults重写默认值对象. 具体用法如下: <input id="email" class="easyui-validatebox" data-options="required:true,val

jQuery easyui中获取datagrid某一列的值之和

我想实现的功能就是加载datagrid之和能够计算出某一列的值之和,删除某一行数据的时候会从总数里面减去这列这行的数据,新增一条记录的时候也会把这个数据加在总数上面..说起来不知道能不能被人理解... 求大神帮忙.. 下面是部分代码.. 有些代码已经省略了..  怎么获取“我是那个数”的所有列的值的和呢?? 和删除增加那列数据呢 $(function() {$('#content').datagrid( {toolbar : [ {text : '新增',iconCls : 'icon-add'