jqgrid在线文档（Jqgrid 如何根据url参数的变化刷新表格内容）

：暂无数据 2026-09-29 12:50:11 ：0

本篇文章给大家谈谈jqgrid在线文档，以及Jqgrid 如何根据url参数的变化刷新表格内容对应的知识点，文章可能有点长，但是希望大家可以阅读完，增长自己的知识，最重要的是希望对各位有所帮助，可以解决了您的问题，不要忘了收藏本站喔。

本文目录

Jqgrid 如何根据url参数的变化刷新表格内容
jqgrid datatype参数 local 和 json 的区别
用 jqgrid 显示表格为什么最下面一行是乱码啊
利用JS应用的Javascript网格插件
jqgrid需要引用哪些文件
如何利用jqGrid表格方法重新设置caption属性值

Jqgrid 如何根据url参数的变化刷新表格内容

你好提问者：

大体流程是这样的：

首先你说的那个组织目录呢，在他点击的时候会链到不同的页面显示不同的数据！

加载JQGrid url会找相应的action，查询数据，然后回显！这里有段jqGrid的代码，仅供参考！

jsp页面
《%@ page language="java" pageEncoding="utf-8"%》
《%@ taglib uri="/sys-tags" prefix="tl"%》
***隐藏网址***
***隐藏网址***
《head》
    《title》文章分类《/title》
  《/head》
《body》
  《div class="search_tit"》文章分类《/div》
  《form method="post" target="_blank"》
   《table class="search_table"》
    《tr》
     《td》
      《div》
      分类名称：
      《/div》
      《input class="search_text" type="text" name="catname" id="catname" /》
     《/td》
     《td》
      《input id="submitButton" class="button" value="搜索" type="button" onclick="submitKey(1)"/》
    《input id="submitButton" class="button" value="添加分类" type="button" onclick="articleCatAdd()"/》
      《/td》
    《/tr》
  《/table》
《/form》
《table id="gridTable"》《/table》
《div id="gridPager"》《/div》
《/body》
《/html》
js 脚本：
    $("#gridTable").jqGrid({
        url:webRoot +’admin/articleQueryAll.action’,
        datatype: "json",
        mtype:"POST",
        shrinkToFit:false,
        autoScroll: true,
        width:700,
        forceFit:false,
        cache: false,
        colNames:,
        colModel:[{name:’artid’,index:’art_id’,sortable:true,hidden:true,sorttype:"int"},
                {name:’catid’,index:’cat_id’,hidden:true,sortable:true,sorttype:"int"},
                {name:’arttitle’,index:’art_title’,width:"100px",sortable:true},
                {name:’arturl’,index:’art_url’,sortable:true,width:"220px"},
                {name:’artauthor’,index:’art_author’,sortable:true,width:"80px"},
                {name:’artauthoremail’,index:’art_author_email’,sortable:true,hidden:true},
                {name:’artkeywords’,index:’art_keywords’,sortable:true,hidden:true},
                {name:’isdelete’,index:’is_delete’,sortable:true,width:"80px",align:"center",formatter:’select’, editoptions:{value:"0:《img style=’cursor:pointer’ value=’0’ title=’启用’ src=’"+webRoot +"WEB-FACE/css/images/yes.gif’ /》;1:《img style=’cursor:pointer’ value=’1’ title=’禁用’ src=’"+webRoot+"/WEB-FACE/css/images/no.gif’ /》"}},
                {name:’artdesc’,index:’art_desc’,sortable:true,hidden:true},
                {name:’sortorder’,index:’sort_order’,width:"80px",sortable:true,align:"center"},
                {name:’act’,index:’act’,sortable:false,width:"110px"},
        ],
        sortname:’art_id’,
        sortorder:’desc’,
        rowNum:10,
        rowList:,
        viewrecords:true,
        jsonReader: {
                root:"dataRows",                // 数据行（默认为：rows）
                page: "currPage",               // 当前页
                total: "totalPages",            // 总页数
                records: "totalRecords",        // 总记录数
                repeatitems : false             // 设置成false，在后台设置值的时候，可以乱序。且并非每个值都得设
        },
        prmNames:{rows:"articleSelectKey.pageSize",page:"articleSelectKey.currPage",sort:"articleSelectKey.orderBy",order:"articleSelectKey.order"},
        pager:"#gridPager",
       // caption: "品牌信息列表",
        onSortCol: function(index, sortorder){
         var curPage = $(".ui-pg-input").val();
         submitKeyArticle(curPage);
        },
        onPaging: function(pgButton){
       // caption: "品牌信息列表",获取控件里的值
         var arttitle = $("input").val();

         var totalPages = $("#gridTable").jqGrid(’getGridParam’, ’lastpage’);
         if(/^*$/.test($.trim($(".ui-pg-input").val()))){
          if(totalPages - $.trim($(".ui-pg-input").val()) 《 0){
          $(".ui-pg-input").val(totalPages);
          }
         }

   $("#gridTable").jqGrid(’setGridParam’,{
        datatype:’json’,
       postData:{’articleSelectKey.arttitle’:arttitle},
       });
        },
        //获取前台页面的状态  是否在线
        onCellSelect:function(rowId,cellCount){
         var data = $("#"+rowId +"》td");
         var artid = data.innerHTML;
         if(cellCount == 7){
          openStore(artid,rowId);
         }
        },
        // caption: "品牌信息列表",获取列表里的操作值
        gridComplete: function(){
         if(permissionId!="" && permissionId==1){
       var ids = jQuery("#gridTable").jqGrid(’getDataIDs’);
       for(var i=0;i 《 ids.length;i++){
        var cl =jQuery("#gridTable").jqGrid(’getRowData’, ids);
        var actions = "《div》《nobr》《a href=’#’ class=’listwordbtn’ onclick=’editArticle(" + cl.artid+");’》《/a》《a href=’#’ class=’listwordbtn’  onclick=’articleDelete(" + cl.artid+");’》删除《/a》《/nobr》《/div》";
        jQuery("#gridTable").jqGrid(’setRowData’,ids,{act:actions});
       }
         }
     }
        }).navGrid(’#gridPager’,{edit:false,add:false,del:false,search:false});
// 确定键_根据条件查询
function submitKeyArticle(curPage){
    var arttitle = $("input").val();
$("#gridTable").jqGrid(’setGridParam’,{
    datatype:’json’,
    postData:{’articleSelectKey.arttitle’:arttitle},
    page:curPage
   }).trigger("reloadGrid");
}
//添加
function articleAdd(){
$(".index_page").load(webRoot + "admin/articleManageShow.action?_="+Math.random()+"&pageset.pageType=1");
}
//_修改
function editArticle(artid){
$(".index_page").load(webRoot + "admin/articleManageShow.action?_="+Math.random()+"&pageset.pageType=2&ids=" + artid);
}
//返回展示类表
function toGrid() {
$(".index_page").load(webRoot + "admin/articleManageShow.action?_="+Math.random()+"&pageset.pageType=0");
}
//上线
function openStore(artid,rowId){
if(permissionId==""||permissionId==0){
  return;
}
$.post(webRoot +"admin/isDeleteArticle.action", { artid : artid},
  function(data) {
  var res = eval(data);
  $("#"+rowId+" td").each(function(i){
   if(i==7){
    if(res.commitType == 0){
     $(this).html("《img style=’cursor:pointer’ value=’0’ title=’启用’ src=’" + webRoot + "WEB-FACE/css/images/yes.gif’ /》");
    } else{
     $(this).html("《img style=’cursor:pointer’ value=’1’ title=’禁用’ src=’" + webRoot + "WEB-FACE/css/images/no.gif’ /》");
    }
   }
  });
});
}
//删除
function articleDelete(artid){
if(confirm("确定删除？")){
$.post(webRoot +"admin/getArtidDelete.action?pageset.pageType=3", {ids:artid},
function(data){
var result = eval(data);
showDialog(result.message,webRoot + "admin/articleManageShow.action?pageset.pageType=0");
});
}
}

jqgrid datatype参数 local 和 json 的区别

简单描述datatype参数的local和json值的区别：

1、当jqgrid的参数为datatype:"local"表示由前端先获取到jsonData，再set到jqgrid去渲染数据：

$(’#table’).jqGrid(’setGridParam’, {data: jsonData});

$(’#table’).jqGrid({ data:jsonData, datatype:"local", loadonce: false,
//更多参数请查看文档
})

2、当jqgrid的参数为datatype:"json"表示由jqgrid直接Ajax获取jsonData；

用 jqgrid 显示表格为什么最下面一行是乱码啊

解决jqgrid乱码办法如下：

把文件jquery.jqGrid.min.js中的三个函数返回值进行编码。
jQuery(this).find("select :selected").val(),h=jQuery(this).find("input.vdata,select.vdata :selected").val();
替换成如下代码即可：
encodeURIComponent(jQuery(this).find("select :selected").val()),h=encodeURIComponent(jQuery(this).find("input.vdata,select.vdata :selected").val());

利用JS应用的Javascript网格插件

表格一直是展示数据的最好方式。以微软的Excel为例，我们可以排序、整理、，甚至几次点击轻松过滤数据。这次，我们看一看JavaScript网格插件，利用JS应用，它转换成普通表到“类Excel”布局，并有加载、操作、查看数据的一堆功能。
下面列出7个JavaScript网格插件，他们都有不错的功能和漂亮的UI，一定会非常有用。
FlexiGrid
Flexigrid是一个类似于Ext Gird，但基于jQuery开发的Grid。它具有的功能包括：可以调整列宽，合并列标题，分页，排序，显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
EditableGrid
EditableGrid是一个JavaScript Library，利用它能够让标准的HTML表格变成可和可排序。这个Library能够让用户自动使用适当的器如textfields、checkbox等来单元格，并内置多各个输入校验器（integer、double、URL、E-mail和Date）。此外EditableGrid还可选集成Open Flash Chart，能够自动将表格中的数据转成图表。
jQGrid
jqGrid 是一个用来显示网格数据的jQuery插件，文档比较全面，附带中文版本。它可以被整合用任何服务器端技术，包括PHP, ASP, Java Servlets, JSP, ColdFusion, 以及Perl。
TableSorter
Tablesorter 是一个用来直接在浏览器上对表格数据进行排序的jQuery插件，无需再次刷新页面，支持多种单元格数据类型，例如数值、字符串、日期和自定义排序。
主要的特点包括：
多列排序支持文本、URL地址、数值、IP地址、日期类型，以及自定义类型排序支持 TH 元素的 ROWSPAN 和 COLSPAN 属性支持第二个隐藏域排序可扩展外观程序简小，打包后只有 7.4K
DataTables
DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。主要特点：
自动分页处理即时表格数据过滤数据排序以及数据类型自动检测自动处理列宽度可通过CSS定制样式支持隐藏列易用可扩展性和灵活性国际化动态创建表格免费的
SlickGrid
SlickGrid是一个简单的、快速、灵活的表格控件。可以隐藏/显示列，调整列宽度，排序，自定义单元格展示格式和器，支持和创建新记录。
Grid from jQuery UI (coming soon)
jQuery UI Team 团队正在开发一个可创建富应用、快速的网格Widget，可加强HTML表格的数据链接、排序、排版、过滤、行选择、插入等。
不过目前还没有发布，不需要等太久，oschina将跟踪该项目。

jqgrid需要引用哪些文件

一、要使用jqGrid，首先页面上要引入如下css与js文件。
　　1、css
　　《link href="/css/ui.jqgrid.css" rel="stylesheet" type="text/css" /》
　　2、js
　　《script src=’/Scripts/js/jquery-2.0.3.min.js’ type="text/javascript"》《/script》
　　《script src=’/Scripts/js/jqGrid/jquery.jqGrid.min.js’ type="text/javascript"》《/script》
　　《script src=’/Scripts/js/jqGrid/i18n/grid.locale-en.js’ type="text/javascript"》《/script》
二、使用要点说明
　　1、获取单个id
　　获取行号，有这种方式：
　　var rowid = $("#grid-table").jqGrid("getGridParam", "selrow");
　　但是经过实际验证，这种方式不可行，当选中行，再点击同一行会出现获取不到行号的情况。
　　最后先在js最外部定义一个变量selId，然后使用如下代码在选中行时赋值：
　　onSelectRow: function (rowid, status) {
　　　　selId = rowid;　　//给最外层的selId赋值
　　}
　　2、获取多个选中行的id
　　var ids=$(’#gridTable’).jqGrid(’getGridParam’,’selarrrow’);
　　其输出格式是逗号分隔的id，如：
　　1,2,3,4,5
　　3、获得所有行的ID数组
var ids = $("jqgridtableid").jqGrid(’getDataIDs’);
　　4、获取行数据
　　如果想获取选择的行的数据，只要传入rowId即可，如下：
　　var rowData = $(’#gridTable’).jqGrid(’getRowData’,rowId);
　　而这个rowData是一个对象，如果要获取选择的行的这个对象的属性值，如name的值，需如下：
　　var Name= rowData.name;
　　5、获取单元格数据
var celldata = $("jqgridtableid").jqGrid(’getCell’,id,colnum);
　　6、设定行选中
　　//设定选中行,可设定多行选中：
　　$("jqgridtableid").jqGrid(’setSelection’,id1);
　　$("jqgridtableid").jqGrid(’setSelection’,id2);

如何利用jqGrid表格方法重新设置caption属性值

1、问题背景
（1）jqGrid生成表格带有标题，固定不变的
（2）表格标题随着年份进行变化
2、实现源码
view plain copy print?
《!DOCTYPE html》
《html》
《head》
《meta charset="UTF-8"》
《title》如何设置表格caption值《/title》
《link rel="stylesheet" href="../css/ui.jqgrid-bootstrap-ui.css" /》
《link rel="stylesheet" href="../css/ui.jqgrid-bootstrap.css" /》
《link rel="stylesheet" href="../css/ui.jqgrid.css" /》
《script src="../js/jquery-1.11.0.min.js"》《/script》
《script src="../js/jquery.jqGrid.min.js"》《/script》
《script src="../js/i18n/grid.locale-cn.js"》《/script》
《script》
$(function(){
var date = new Date();
var year = date.getFullYear();
var student = [
{id:’001’,name:’zhangsan1’,sex:’m’,age:23},
{id:’002’,name:’zhangsan2’,sex:’w’,age:20},
{id:’003’,name:’zhangsan3’,sex:’m’,age:22},
{id:’004’,name:’zhangsan4’,sex:’w’,age:21},
{id:’005’,name:’zhangsan5’,sex:’m’,age:19},
{id:’006’,name:’zhangsan6’,sex:’w’,age:18},
{id:’007’,name:’zhangsan7’,sex:’m’,age:24},
{id:’008’,name:’zhangsan8’,sex:’w’,age:20},
{id:’009’,name:’zhangsan9’,sex:’m’,age:25},
{id:’010’,name:’zhangsan10’,sex:’w’,age:23}
];
$("#title-grid-table").jqGrid({
data:student,
datatype:’local’,
caption:’学生信息表’,
height:’auto’,
rowNum: 30,
rowList: ,
colNames:,
colModel:[
{name:’id’,index:’id’, width:300, sorttype:"int"},
{name:’name’,index:’name’, width:300,editable:true},
{name:’sex’,index:’sex’,width:300},
{name:’age’,index:’age’,width:300}
],
pager: "#title-grid-pager",
viewrecords: true,
sortname: ’name’,
loadComplete:function(){
$(this).jqGrid("setCaption",year+"年毕业学生信息表");
}
});
});
《/script》
《/head》
《body》
《div》
《table id="title-grid-table"》《/table》
《table id="title-grid-pager"》《/table》
《/div》
《/body》
《/html》
3、问题说明
（1）固定标题属性直接使用caption
（2）重新设置标题的方法是setCaption