`

jqgrid colModel 中formatter的用法

阅读更多

 
var historys = function() 
{
function format(cellvalue){//cellvalue表示当前单元格的值
var str = "";
var hour = 0;
var minute = 0;
var second = 0;

second = cellvalue / 1000;

if (second > 60) {
minute = second / 60;
second = second % 60;
}
if (minute > 60) {
hour = minute / 60;
minute = minute % 60;
}

var strHour = parseInt(hour);
var strMinute = parseInt(minute);
var strSecond = parseInt(second);

return (strHour + "小时" + strMinute + "分钟"
+ strSecond + "秒");
}


/**加载数据列表*/
/**加载数据列表*/
this.load_processHistories_list=function()
{
$("#historyProcess").jqGrid({
url:'upload!showHistories.action',
mtype:"post",
datatype:"json", 
height:250,width:850,
colNames:['Key','ProcessID','InstanceID','state','startTime','endTime','Duration','endActivityName'],
colModel:[
{name:'key',index:'key',width:50,sorttype:'Long',sortable:true,editable:true},
{name:'processDefinitionId',index:'processDefinitionId',width:100,editable:true},
{name:'processInstanceId',index:'processInstanceId',width:100,align:'center',editable:true},
{name:'state',index:'state',width:50,sortable:false,align:'center',editable:true},
{name:'startTime',index:'startTime',width:100,align:'center',editable:true},
{name:'endTime',index:'endTime',width:100,sortable:false,align:'center',editable:true},
{name:'duration',index:'duration',width:100,align:'center',editable:true,formatter:format},
{name:'endActivityName',index:'endActivityName',width:150,sortable:false,align:'center',editable:true}
],
pager:'#page', 
rowNum:10, 
rowList:[10,15,20,30], 
viewrecords: true, 
multiselect:true,
sortname:'imId',
sortorder:'desc',
editurl:'eidt.do',
caption:'  流程管理',
jsonReader: {
root: "histories", 
records: "records",
page: "page",
total: "total",
repeatitems: false,
id: "imId"
},
toolbar: [true,"top"],

});


$("#t_historyProcess")
.css("padding-top","5px")
.css("padding-bottom","10px")
.css("border-top","none")
.css("background","#eee")
.css("text-align","left");

$("#t_historyProcess").append($('#toolbar').html());

jQuery("#historyProcess") .navGrid('#page',{edit:false,add:false,del:false,search:false});


}
/**open the search window*/
this.search_openwindow=function()
{
$('#searchProcess').window('open');
}

/**close the search window*/
this.search_closewindow=function()
{
$('#searchProcess').window('close');
}
//载入
return {
init: function() 
{
//加载数据列表
load_processHistories_list();
$('#link_search_ok').click(search_openwindow);
$('#link_search_cancel').click(search_closewindow);
}
}

}();

 

//载入
$(document).ready(function() 
{
historys.init();
});

second = cellvalue / 1000;

if (second > 60) {
minute = second / 60;
second = second % 60;
}
if (minute > 60) {
hour = minute / 60;
minute = minute % 60;
}

var strHour = parseInt(hour);
var strMinute = parseInt(minute);
var strSecond = parseInt(second);

return (strHour + "小时" + strMinute + "分钟"
+ strSecond + "秒");
}


/**加载数据列表*/
/**加载数据列表*/
this.load_processHistories_list=function()
{
$("#historyProcess").jqGrid({
url:'upload!showHistories.action',
mtype:"post",
datatype:"json", 
height:250,width:850,
colNames:['Key','ProcessID','InstanceID','state','startTime','endTime','Duration','endActivityName'],
colModel:[
{name:'key',index:'key',width:50,sorttype:'Long',sortable:true,editable:true},
{name:'processDefinitionId',index:'processDefinitionId',width:100,editable:true},
{name:'processInstanceId',index:'processInstanceId',width:100,align:'center',editable:true},
{name:'state',index:'state',width:50,sortable:false,align:'center',editable:true},
{name:'startTime',index:'startTime',width:100,align:'center',editable:true},
{name:'endTime',index:'endTime',width:100,sortable:false,align:'center',editable:true},
{name:'duration',index:'duration',width:100,align:'center',editable:true,formatter:format},
{name:'endActivityName',index:'endActivityName',width:150,sortable:false,align:'center',editable:true}
],
pager:'#page', 
rowNum:10, 
rowList:[10,15,20,30], 
viewrecords: true, 
multiselect:true,
sortname:'imId',
sortorder:'desc',
editurl:'eidt.do',
caption:'  流程管理',
jsonReader: {
root: "histories", 
records: "records",
page: "page",
total: "total",
repeatitems: false,
id: "imId"
},
toolbar: [true,"top"],

});


$("#t_historyProcess")
.css("padding-top","5px")
.css("padding-bottom","10px")
.css("border-top","none")
.css("background","#eee")
.css("text-align","left");

$("#t_historyProcess").append($('#toolbar').html());

jQuery("#historyProcess") .navGrid('#page',{edit:false,add:false,del:false,search:false});


}
/**open the search window*/
this.search_openwindow=function()
{
$('#searchProcess').window('open');
}

/**close the search window*/
this.search_closewindow=function()
{
$('#searchProcess').window('close');
}
//载入
return {
init: function() 
{
//加载数据列表
load_processHistories_list();
$('#link_search_ok').click(search_openwindow);
$('#link_search_cancel').click(search_closewindow);
}
}

}();

 

//载入
$(document).ready(function() 
{
historys.init();
});
分享到:
评论

相关推荐

    jqgrid colModel中文配置文档

    jqGrid是一款功能强大的jQuery插件,用于创建交互式的表格,其中`colModel`是jqGrid的核心配置之一,它定义了表格列的各种属性和行为。在本篇文档中,我们将深入探讨`colModel`的各项配置选项。 1. `align`: 这个...

    Jquery 实现列的拖动 jquery grid

    通过在`colModel`中定义一个展开列,我们可以实现类似树形结构的效果: ```javascript { name: 'expandColumn', index: 'expandColumn', width: 40, sortable: false, resizable: false, formatter: 'checkbox', ...

    jqGrid 离线帮助手册

    jqGrid 最新版 3.7.2 离线帮助手册,方便各位查看 Installing jqGrid Before you begin System Requirements Download jqGrid Change Log How to Install How it Works My First Grid Basic Grid Conventions ...

    jqGrid 离线帮助手册 来源官方wiki

    jqGrid 3.7.2 版本 官方完整帮助手册,含有很多代码样例,方便大家查看学习。 Upgrading Upgrade from 3.6.4 to 3.6.5 Upgrade from 3.4.x to 3.5 Installing jqGrid Before you begin System Requirements Download...

    jqgrid 3.6.2 中文文档

    `colModel`是jqGrid中定义列的关键配置对象,每个列都有其对应的配置项,例如: 1. `align`: 定义列数据在单元格内的对齐方式,可以是`left`、`center`或`right`。 2. `datefmt`: 设置日期的显示格式,例如`Y-m-d`...

    jqGrid中文文档.pdf

    JqGrid是一款功能强大的JavaScript组件,主要用于创建交互式的数据网格,它在互联网应用中广泛用于展示和管理大量结构化的数据。JqGrid提供了一套丰富的API接口和配置选项,使得开发者能够灵活地定制表格的外观和...

    jqgrid序列

    `jqGrid`是一款基于JavaScript的开源数据网格组件,主要用于在Web应用中展示和管理大量结构化数据。它提供了丰富的特性和功能,包括数据的分页、排序、过滤、编辑以及对服务器端数据的异步操作。jqGrid与jQuery库...

    jqgrid 3.6中文文档

    在jqGrid 3.6版本中,配置表格涉及到多个方面,包括列模型(colModel)、编辑规则(editrules)、表单选项(formoptions)等。下面将详细介绍这些关键配置。 1. **colModel**: - `align`:设置列数据在单元格中的对齐...

    jqGrid_API中文

    jqGrid可以与其他前端框架如AngularJS、React或Vue.js结合使用,通过适当的封装和适配,使其成为这些现代框架中的数据展示组件。 总的来说,jqGrid是一款功能丰富的数据网格组件,通过其API和配置选项,开发者可以...

    jqGrid的自适应表格

    { name: 'longData', width: 150, title: true, formatter: 'showlink', cellattr: function (rowId, tv, rowObject, colModel, data) { return 'title="' + tv + '"'; // 设置单元格的title属性为内容 } } ``` 在...

    jqgrid实现分组显示和统计

    jqGrid是一款功能强大的JavaScript表格插件,用于在Web页面中展示和操作数据。它支持多种功能,包括数据分页、排序、搜索、编辑等。在本教程中,我们将深入探讨如何利用jqGrid实现数据的分组显示和统计,这对于数据...

    jqgrid 编辑表格 一列

    默认情况下,jqGrid 使用文本框作为编辑器。但你可以通过 `edittype` 和 `formatter` 参数自定义编辑器。例如,将某一列设置为日期选择器: ```javascript { name: 'date', index: 'date', width: 120, editable: ...

    jqGrid教程

    在项目中使用jqGrid,首先需要下载jQuery库和jqGrid插件。然后在HTML文件中引入这两个文件,通过`<script>`标签确保jQuery先于jqGrid加载。同时,需要设置CSS样式以呈现网格布局。 三、基本使用 创建一个jqGrid,...

    jqgrid应用

    - **jqGrid的中文文档**:提供的文档如"jqGrid3.6中文文档"系列,详细解释了jqGrid的使用方法和配置选项,是学习jqGrid的重要参考资料。 - **高级应用**:"jqGrid详解及高级应用"PDF文件可能包含更深入的使用技巧...

    jqGrid 参数详解

    jqGrid 是一个强大的 jQuery 插件,用于在网页上创建、操作和展示数据。它提供了丰富的功能,包括数据的检索、排序、分页、编辑和过滤。本篇将深入解析 jqGrid 的各种参数,帮助你更好地理解和利用这个工具。 ### 1...

    jqGrid插件--JQuery表格插件

    1. **基本使用**:jqGrid通过在HTML表格元素上应用jQuery选择器和方法来初始化,允许开发者轻松地将静态或动态数据转化为可操作的表格。基本语法是`$("#gridId").jqGrid(options);`,其中`options`是一个包含配置...

    jqgrid下载及相关例子

    jqGrid是一款功能强大的JavaScript数据网格插件,广泛用于Web应用程序中展示、操作和管理大量数据。它是基于jQuery库开发的,提供了丰富的特性和灵活的配置选项,使得在网页上创建交互式表格变得简单易行。 1. **...

    jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码

    在JqGrid的`colModel`中,我们需要为操作列指定特定的属性来实现所需的功能。关键的两个属性是`edittype`和`formatter`。`edittype: 'select'`表示这一列的单元格将以下拉选择框的形式显示,而`formatter: ...

    深入研究jqgrid

    **一、jqGrid基本使用** 1. **安装与引入**:首先需要下载jqGrid的库文件,包括js和css文件。在HTML文件中通过`<script>`和`<link>`标签引入它们。例如: ```html <link rel="stylesheet" href="path/to/ui....

    JQGrid4.0以上英文API文档

    JQGrid是一款强大的JavaScript表格插件,基于jQuery库,用于在Web应用中展示和操作数据。它提供了丰富的功能,包括分页、排序、过滤、编辑、添加、删除和自定义列等。4.0版本之后的JQGrid引入了许多新特性,提高了...

Global site tag (gtag.js) - Google Analytics