说明:jqgrid属性colModel的字段排序,在于三个参数sortable:true,sortname:'name',sortorder:'asc'
下面附上列子:
function initList(){
var height = getTabContentHeight()-133;
var width = window.parent.document.documentElement.clientWidth-(window.screenLeft-window.parent.screenLeft)-186;
$("#list").jqGrid({
url:'<%=basePath%>customer!list.action',
colModel: [
{label:'企业名称', name:'name', align:"center",width:220},
{label:'企业编号', name:'code',align:"center",width:60},
{label:'企业性质', name:'type.title',index:'type', align:"center",width:60,hidden:true},
{label:'入驻状态', name:'parkStatus.title',index:'parkStatus',align:"center",width:60},
{label:'招商项目ID', name:'investmentId', align:"center",hidden:true},
{label:'账号', name:'userId', align:"center", hidden:true},
{label:'跟踪引进', name:'hostName', align:"center", hidden:true},
{label:'技术领域', name:'technic.dataValue', align:"center", hidden:true},
{label:'企业来源', name:'source.dataValue', align:"center", hidden:true},
{label:'孵化企业', name:'incubated.title',index:'incubated', align:"center",width:60},
{label:'孵化器配置', name:'incubationInfo.incubateConfig.dataValue',index:'incubationInfo.incubateConfig', align:"center",width:120},
{label:'联系地址', name:'customerInfo.address', align:"center", hidden:true},
{label:'邮编', name:'customerInfo.zipCode', align:"center", hidden:true},
{label:'网址', name:'customerInfo.webSite', align:"center", hidden:true},
{label:'办公电话', name:'customerInfo.officePhone', align:"center", hidden:true},
{label:'传真', name:'customerInfo.fax', align:"center", hidden:true},
{label:'Email地址', name:'customerInfo.email', align:"center", hidden:true},
{label:'注册时间', name:'customerInfo.regTime', align:"center", hidden:true,formatter:'date',formatoptions:{srcformat: 'Y-m-d', newformat: 'Y-m-d'}},
{label:'注册类型', name:'customerInfo.regType.dataValue', align:"center", hidden:true},
{label:'注册资本', name:'customerInfo.regCapital', align:"center", hidden:true},
{label:'币种', name:'customerInfo.currencyType.dataValue', align:"center", hidden:true},
{label:'组织机构', name:'customerInfo.organizationNumber', align:"center", hidden:true},
{label:'工商注册号', name:'customerInfo.businessNumber', align:"center", hidden:true},
/* {label:'税务登记证', name:'customerInfo.taxNumber', align:"center", hidden:true}, */
{label:'法定代表人', name:'customerInfo.legalPerson', align:"center", hidden:true},
{label:'证件类型', name:'customerInfo.documentType.dataValue', align:"center", hidden:true},
{label:'证件号', name:'customerInfo.documentNumber', align:"center", hidden:true},
{label:'注册EMAIL', name:'customerInfo.regMail', align:"center", hidden:true},
{label:'移动电话', name:'customerInfo.cellphone', align:"center", hidden:true},
{label:'注册地址', name:'customerInfo.regAddress', align:"center", hidden:true},
{label:'经营范围', name:'customerInfo.businessScope', align:"center", hidden:true},
{label:'营业截至日期', name:'customerInfo.businessExpireDate', align:"center", hidden:true,formatter:'date',formatoptions:{srcformat: 'Y-m-d', newformat: 'Y-m-d'}},
{label:'孵化日期起', name:'incubationInfo.incubationStartDate', align:"center", hidden:true,formatter:'date',formatoptions:{srcformat: 'Y-m-d', newformat: 'Y-m-d'}},
{label:'孵化日期止', name:'incubationInfo.incubationEndDate', align:"center", hidden:true,formatter:'date',formatoptions:{srcformat: 'Y-m-d', newformat: 'Y-m-d'}},
{label:'毕业日期', name:'incubationInfo.graduationDate', align:"center", hidden:true,formatter:'date',formatoptions:{srcformat: 'Y-m-d', newformat: 'Y-m-d'}},
{label:'是否高新技术企业', name:'incubationInfo.highTechEnterprise.title', align:"center", hidden:true},
{label:'是否建立创业导师', name:'incubationInfo.tutorSupport.title', align:"center", hidden:true},
{label:'是否大学生创业', name:'incubationInfo.undergraduateEnterprise.title', align:"center", hidden:true},
{label:'是否留学生创业', name:'incubationInfo.overseaEnterprise.title', align:"center", hidden:true},
{label:'孵化状态', name:'incubationInfo.statusName', align:"center",width:120},
{label:'管理', name:'manager', align:"center",width:80,sortable:false, resizable:false}
],
height: height,
width: width,
rowNum:40,
rowList:[40,80,160,320],
sortable:true,
sortname:'code',
sortorder:'asc',
shrinkToFit: false,
gridComplete: function(){
var ids = $(this).jqGrid('getDataIDs');
for(var i = 0 ; i < ids.length; i++){
var id = ids[i];
var content = "";
var row = $(this).jqGrid('getRowData',id);
if(row.userId==''){
content += "<img src=\"core/common/images/users.png\" width=\"14\" height=\"14\" title=\"设置账号\" onclick=\"createUser('"+id+"');\" /> ";
}else{
content += "<img src=\"core/common/images/users.png\" width=\"14\" height=\"14\" title=\"修改密码\" onclick=\"updateAccountPassword('"+row.userId+"');\" /> ";
}
content += "<img src=\"core/common/images/viewbtn.gif\" width=\"14\" height=\"14\" title=\"查看\" onclick=\"viewById('"+id+"');\" /> ";
content += "<img src=\"core/common/images/edit.gif\" width=\"14\" height=\"14\" title=\"编辑\" onclick=\"editById('"+id+"');\" /> ";
if(row.investmentId!=''){
content += "<img src=\"core/common/images/view2.png\" width=\"14\" height=\"14\" title=\"项目信息\" onclick=\"viewInvestmentById('"+row.investmentId+"');\" /> ";
}
content += "<img src=\"core/common/images/del.gif\" width=\"14\" height=\"14\" title=\"删除\" onclick=\"deleteById('"+id+"');\" /> ";
$(this).jqGrid('setRowData',id,{manager:content});
}
}
}).navGrid('#pager',{add: false, edit: false, del: false, search: false}).navButtonAdd('#pager',{
caption : "列选择",
title : "选择要显示的列",
onClickButton : function(){
$(this).jqGrid('columnChooser');
}
});
}
相关推荐
在`colModel`中,为每列定义`sortable`属性,设置为`true`以允许该列参与排序。 当用户点击表头时,jqGrid会触发`sortData`事件,此时可以捕获这个事件并根据用户的排序选择更新请求参数。`gridSortOrder`属性则...
在网页开发中,jQuery Grid是一款强大的数据管理组件,它提供了丰富的功能,如数据分页、排序、搜索等。本文将详细讲解如何利用jQuery实现网格(Grid)中的列拖动功能,以及如何展示和压缩内容,以达到类似Excel的...
在本文中,我们将深入探讨jqGrid中的表头锁列和排序功能的实现细节。 一、jqGrid 添加列的大标题 jqGrid 提供了设置列组标题的功能,允许为多列设置一个共同的标题头部,提升表格的可读性。实现这一功能的代码如下...
* colModel:设置表格的列模型。 * colNames:设置表格的列名称。 * datatype:设置表格的数据类型。 * editurl:设置表格的编辑 URL。 * gridview:设置表格的 Grid 视图。 * height:设置表格的高度。 * hidegrid...
本文将详细介绍jQgrid的中文文档API,涵盖了其原理、使用方法、参数配置、事件处理、数据处理、ColModel API等方面的知识点。 原理 jQgrid是典型的B/S架构,服务器端只是提供数据管理,客户端只是提供数据显示。...
“jqGrid基础学习:4jqGrid的ColModel API”深入探讨了ColModel,它是定义表格列属性的关键部分。通过配置ColModel,可以自定义列的宽度、对齐方式、可编辑性等特性。 5. **jqGrid中的事件**: “jqGrid基础学习...
`colModel`是JqGrid最重要的配置之一,它定义了表格的所有列。每列都有多个属性,如`name`(列名)、`index`(索引名)、`width`(宽度)等。还可以配置列的可编辑性、隐藏性、排序方式等。 四、分页 JqGrid提供...
4. **操作功能**:jqGrid支持排序、搜索、编辑、添加和删除数据。可通过设置`sortname`和`sortorder`进行默认排序,使用`searching`选项启用搜索框,设置`editGridRow`和`addGridRow`方法实现编辑和添加功能。 5. *...
jqGrid是一款功能强大的JavaScript表格插件,用于在网页上展示并操作数据,它支持各种操作,包括数据的加载、排序、搜索以及分页等。在这个"jqgrid加载本地数据并且分页例子"中,我们将深入探讨如何利用jqGrid实现从...
jqGrid是基于jQuery库的表格插件,它提供了一套完整的解决方案,包括数据的加载、排序、筛选、分页、编辑以及格式化等。jqGrid支持多种数据源,如JSON、XML、HTML、CSV等,能够无缝集成到各种Web项目中。其核心功能...
JQGrid 是一个基于 jQuery 的表格控件,它使用 AJAX 方式与服务器端通信,能够实现多种功能,如排序、过滤、分页、编辑等。下面是 JQGrid 的一些关键特点和使用方法。 JQGrid 的特点 * 外观时髦,功能齐全 * JS ...
- `colModel`:定义表格列的属性,如字段名、宽度、是否可编辑等。 - `pager`:分页器的ID,用于显示分页控件。 - `sortname`和`sortorder`:默认排序的列名和顺序。 - `rowList`:分页大小选项列表。 - `mtype`:...
6. **功能特性**:jqGrid 提供了许多内置功能,如排序(`sortable`)、分页(`pager`)、搜索(`searching`)、编辑(`editable`)、添加、删除和更新记录等。 7. **自定义行为**:通过事件监听和回调函数,可以...
默认情况下,JQGrid根据`sortname`和`sortorder`进行排序。 6. **搜索功能** JQGrid支持高级搜索,可以配置`searching`参数启用搜索栏。通过`filterToolbar`或`searchGrid`方法,可以实现简单的文本搜索或复杂的...
colModel: [ // 列定义 { name: "id", index: "id", width: 50 }, { name: "name", index: "name", width: 100 }, { name: "age", index: "age", width: 70 } ], pager: "#pager", // 分页器ID rowNum: 10, /...
当用户进行操作,例如排序、搜索或编辑单元格时,jqGrid 会发送请求到服务器,服务器处理这些请求并返回更新后的数据。 jqGrid 支持大量的参数定制其行为。例如: 1. `url`:string 类型,定义获取数据的服务器端...
jqGrid是由Trirand公司开发的,基于jQuery的开源项目,它提供了数据网格的功能,支持数据分页、排序、过滤、编辑等多种操作。jqGrid的使用可以极大地提升表格的用户体验,使其在数据管理方面更加高效。 在实现表格...
colModel: [ { name: 'column1', index: 'column1', width: 100 }, { name: 'column2', index: 'column2', width: 200 }, { name: 'column3', index: 'column3', width: 150 } ], pager: '#pager', // 分页...
总结来说,jqGrid 的上端合计行功能通过启用 `footerrow`,定义 `colModel` 的 `summaryType`,并利用 `loadComplete` 或 `gridComplete` 回调函数进行数据计算和更新,可以帮助我们快速高效地展示列表数据的总计,...
它支持多种功能,包括数据分页、排序、搜索、编辑等。在本教程中,我们将深入探讨如何利用jqGrid实现数据的分组显示和统计,这对于数据分析和报告呈现来说尤其重要。 一、分组显示 1. 初始化jqGrid 首先,我们需要...