JGrid中文：http://blog.mn886.net/jqGrid/（ JGrid英文：http://www.trirand.com/blog/jqgrid/jqgrid.html）
JGrid好的文章：http://www.cnblogs.com/kissdodog/p/3875992.html
案例：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'AddStar.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" type="text/css" href="/scripts/jqgrid/css/ui.jqgrid.css" media="all">
<link rel="stylesheet" type="text/css" href="/scripts/jqgrid/css/ui-lightness/jquery-ui-1.10.3.custom.min.css" media="all">
<style type="text/css">
label {
color: BLUE;
}
th{
font-weight: bold;
font-size: 13px;
color: RED;
}
</style>
<script type="text/javascript" src="/scripts/jquery.min.js"></script>
<script src="/scripts/jqgrid/js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="/scripts/jqgrid/js/i18n/grid.locale-cn.js"></script>
<script src="/scripts/jqgrid/js/jquery.jqGrid.min.js"></script>
<script src="/scripts/jqgrid/js/plugins/grid.addons.js"></script>
<script src="/scripts/jqgrid/js/plugins/grid.postext.js"></script>
<script src="/scripts/jqgrid/js/plugins/grid.setcolumns.js"></script>
<script type="text/javascript" src="/scripts/jquery.form.js"></script>
<script type="text/javascript" src="/scripts/layer/layer.js"></script></head>
<body>
<table id="list"></table>
<div id="pager"></div>
<div id="addDialog" title="添加信息" style="display:none;">
<form id="addfrm" class="formStyle" enctype="multipart/form-data">
<table align="center">
<tr>
<td width="80"> 姓名:</td>
<td><input type="text" name="name" id="addName" /></td>
</tr>
<tr>
<td width="80">头像:</td>
<td> <input type="file" name="file" id="addFile"/></td>
</tr>
<tr>
<td width="80"> 性别:</td>
<td><input type="radio" name="sex" value="1" checked="checked"/>男<input type="radio" name="sex" value="0" />女</td>
</tr>
<tr>
<td width="80">国家:</td>
<td>
<select name="areaId" id="addArea">
<option value="1">中国</option>
<option value="2">加拿大</option>
<option value="3">法国</option>
<option value="4">日本</option>
<option value="5">韩国</option>
<option value="6">马来西亚</option>
<option value="7">新加坡</option>
<option value="8">英国</option>
<option value="9">美国</option>
</select>
</td>
</tr>
<tr>
<td width="80">运营状态:</td>
<td><input type="radio" name="operating" value="1" checked="checked" />正在运营<input type="radio" name="operating" value="0" />停止运营</td>
</tr>
</table>
</form>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
//获取所有新增用户信息
$("#list").jqGrid({
url:"/admin/setup/getStarList.do",
height:'auto',
autowidth:true,
datatype: "json",
mtype: 'POST',
multiselect: false,
colNames:["编号","姓名","性别","头像","areaId","国家","是否运营","操作"],
colModel:[
{name:"id",index:"id",align:"center",width:8,editable:false,sortable:true},
{name:"name",index:"name",align:"center",width:20,editable:false,sortable:false},
{name:"sex",index:"sex",align:"center",width:20,editable:false,sortable:false,formatter:function(cellvalues,options,rowData){
var result;
if(cellvalues==1){
result="<span>男</span>";
}else{
result="<span>女</span>";
}
return result;
}},
{name:"headPic",index:"headPic",align:"center",width:20,editable:false,sortable:false,formatter:function(cellvalues,options,rowData){
var result;
if(cellvalues!=null){
result="<img src='"+cellvalues+"' />";
}else{
reslut ="";
}
return result;
}},
{name:"areaId",index:"areaId",align:"center",width:30,editable:false,sortable:false,hidden:true},
{name:"country",index:"country",align:"center",width:30,editable:false,sortable:false},
{name:"operating",index:"operating",align:"center",width:20,editable:true,sortable:false,formatter:function(cellvalues,options,rowData){
var result;
if(cellvalues==1){
result="<span>运营</span>";
}else{
result="<span>停止</span>";
}
return result;
}},
{name:"operating",index:"operating",align:"center",width:20,editable:true,sortable:false,formatter:function(cellvalues,options,rowData){
var reslut;
var starId=rowData["id"];
if(cellvalues==1){
reslut= "<font color=\"green\">上架</font>/<font onclick=\"outAway("+starId+",0)\" color=\"red\">下架</font>";
}else{
reslut= "<font onclick=\"outAway("+starId+",1)\" color=\"green\">上架</font>/<font color=\"red\">下架</font>";
}
return reslut;
}}
],
pager: "#pager",
rowNum:999999999,
rowList: [],
sortname: "autoId",
viewrecords: true,//记录总条数是否可见
sortorder: "desc",
hidegrid:false,
caption:"用户明细",
prmNames:{
page:"curPage", // 表示请求页码的参数名称
rows:"pageSize", // 表示请求行数的参数名称
sort:"orderBy",// 表示用于排序的列名的参数名称
order:"order" // 表示采用的排序方式的参数名称
},
postData:{
},
//从后台读取数据的类型参数可以在此设置
jsonReader:{
root:"dataRows",total:"allPage",records:"allNum"
}
});
jQuery("#list").jqGrid('navGrid','#pager',{
addtext:"添加",
addfunc:openAddDialog
});
});
/*增加*/
function openAddDialog(){
$("#addfrm")[0].reset();//清空表单数据
$("#addDialog").dialog("open");
}
$("#addDialog").dialog({
autoOpen:false,
width:"auto",
height:"auto",
modal:true,
position:'top',
buttons:{
"添加":function(){
var b=checkMes();
if(b){
var options={
url:"/admin/setup/addStar.do",
type:"post",
dataType:"json",
success:function(data){
if(data.flag){
if(data.isSuccess){
//alert("ok");
$("#addDialog").dialog("close");//关闭
$("#list").trigger("reloadGrid");//刷新
}
}
},
error:function(textStatus,errorThrown) {
layer.loadClose();
alert("系统ajax交互错误:"+textStatus);
layer.alert("系统繁忙，请稍后重试…");
}
};
$("#addfrm").ajaxSubmit(options);
}else{
layer.alert("请输入内容");
}
},
"取消":function(){
$(this).dialog("close");
}
},
"close":function(){
//$(this).dialog("close");
}
});
/*更新明星运营状态*/
function outAway(starId,operating){
if(starId>0 && status!=null){
$.ajax({
url:"/admin/setup/updateStarOperating.do",
data:{
"starId":starId,
"operating":operating
},
dataType:"json",
type:"post",
success:function(data){
if(data.flag){
if(data.isSuccess){
//alert("ok");
}
}
$("#list").trigger("reloadGrid");//刷新
},
error:function(){
layer.loadClose();
//alert("系统ajax交互错误:"+textStatus);
layer.alert("系统繁忙，请稍后重试…");
}
});
}
}
function checkMes(){
var result;
var addname=$("#addName").val().trim();
var addFile=$("#addFile").val().trim();
//alert(result);
if(addname==null || addname.length==0 ){
result=false;
}else{
if(addFile==null || addFile.length==0){
result=false;
}else{
result=true;
//alert("ok");
}
}
//alert(result);
return result;
}
</script>
相关推荐
当使用JSON作为数据源时，需要按照特定格式提供数据，包括`total`, `page`, `records`和`rows`字段，其中`rows`包含实际的数据行。 九、jqGrid学习——翻页 JqGrid支持分页功能，通过`pager`参数设置分页控件，`...
在本文中，我们将深入探讨JGrid的一些核心函数及其使用方法。 首先，JGrid的方法通常通过jQuery选择器调用，例如`jQuery("#grid_id").jqGridMethod()`，其中`grid_id`是你预先定义好的JGrid实例的ID，`jqGridMethod...
在IT领域，特别是前端开发中，使用jQuery插件如jGrid进行数据展示和管理是非常常见的。jGrid（也称为jqGrid）是一个强大的jQuery表格插件，用于创建高度交互的、可排序、可过滤、可分页的数据网格。本文将深入探讨...
8. **响应式设计**：考虑到移动设备的使用，JGrid可能还支持响应式布局，使得在不同屏幕尺寸的设备上都能良好显示。 9. **性能优化**：为了保证在大量数据下的流畅体验，JGrid可能采用了虚拟滚动、延迟加载等技术，...
### JGrid函数及使用教程详解 #### 一、前言 `JGrid`，更准确地应称为`jqGrid`，是一款基于jQuery的强大的数据表格插件，它提供了丰富的功能来展示、排序、搜索和编辑表格数据。本文将详细介绍`jqGrid`的主要函数...
在本主题中，我们将深入探讨如何使用jQuery模拟JGrid实现分页列表显示。JQuery是一个广泛使用的JavaScript库，它提供了丰富的功能，包括DOM操作、事件处理、动画效果以及与Ajax的交互。而JGrid则是一个基于jQuery的...
综上所述，"jgrid.zip"提供的资源可能涵盖了从基本的jGrid使用到高级的.NET集成的各个方面，为开发人员提供了一套完整的工具来实现交互式数据网格功能。为了充分利用这个压缩包，开发者需要对jGrid、jQuery、ASP.NET...
本文将深入探讨jGrid的cellEdit模式，包括其基本原理、配置选项以及实际应用中的技巧，旨在帮助开发者更好地理解和使用这一特性。 一、jGrid概述 jGrid是一款基于jQuery的表格插件，它允许用户在网页上创建交互式...
前端使用jgrid展现，控制使用servlet，业务使用ftpClient连接ftp服务器获取内容集合。 功能点：采用windows目录结构（有返回上级目录 进入文件夹） 排序（文件名 文件大小 创建时间） 搜索（文件名模糊搜索） ...
ASP.NET MVC3、iBATIS和jGrid是Web开发中常用的技术栈，它们各自负责不同的功能领域，结合使用可以构建高效、灵活的Web应用程序。在这个项目中，"asp.net MVC3+iBATIS+jgrid代码生成器"是一个工具，用于自动生成基于...
"jGrid翻页全选记忆勾选"是一个特定的功能需求，它涉及到数据网格的分页和复选框选择的优化，目的是提供更加高效和便捷的数据操作体验。这个功能通常应用于表格或者列表展示大量数据时，用户可以方便地对数据进行...
start jqgirdstart jqgirdstart jqgird
- 性能优化：对于大数据量的表格，需要考虑性能优化，例如使用服务器分页、延迟加载等技术。 总之，jqGrid是一个功能强大且高度可定制的数据网格组件，能够帮助开发者快速构建功能丰富的数据管理界面。通过合理配置...
- 在实际使用过程中，`colModel`中的`name`和`index`属性需要与后端数据结构相匹配。 - `jsonReader`中的配置项需要根据后端返回的JSON数据格式进行调整，以确保正确解析数据。 - 可以通过CSS进一步美化表格样式，...
- 使用jQuery UI的Tabs方法初始化插件，可以通过JavaScript设置各种选项，如激活的Tab、动画效果等。 - 可以动态添加、删除Tab，以及对Tab进行事件绑定，实现更高级的交互功能。 ### 关键知识点：jqGrid **概念**...
总之，"销毁后重新创建的问题"是一个关于Windows应用程序开发中的窗口生命周期管理问题，涉及`ATLASSERT`的使用和`IsWindow()`函数对窗口存在的验证。解决此类问题需要深入理解窗口对象的生命周期，以及如何在代码中...
本篇文章将深入探讨 jqGrid 3.6.2 的核心功能、应用场景以及如何在项目中使用。 一、核心功能 1. 数据分页：jqGrid 支持自动分页，可以轻松处理大量数据，避免一次性加载过多内容导致页面卡顿。 2. 数据排序：...
jgrid拖动改变表格宽度 拖动我1 拖动我2 拖动我3 拖动我4 拖动我5 [Ctrl+A 全选 注:如需引入外部Js需刷新...