jqgrid DAYDAYUP

最新推荐文章于 2024-07-26 11:41:15 发布
最新推荐文章于 2024-07-26 11:41:15 发布
阅读量50 收藏
点赞数
文章标签： javascript java ui ViewUI
原文链接：http://www.cnblogs.com/Lennyyi/p/5031592.html
版权 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../js/jqGrid/CSS/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" href="../js/jqGrid/CSS/jquery-ui-custom.css" />
<script type="text/javascript" src="../js/jQuery/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../js/jQueryUI/jquery-ui.min.js"></script>
<script type="text/javascript" src="../js/jqGrid/grid.locale-cn.js"></script>
<script type="text/javascript" src='../js/jqGrid/jquery.jqGrid.js'></script>
<title>Insert title here</title>
</head>
<body>


<script>
 var mydata2 = [
                {id:"1",invdate:"2010-05-24",name:"test",note:"note",amount:"300.00",tax:"10.00",total:"2111.00"} ,
                {id:"2",invdate:"2010-05-25",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"300.00",tax:"30.00",total:"430.00"},
                {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"300.00",tax:"10.00",total:"210.00"},
                {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"300.00",tax:"30.00",total:"430.00"},
                {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"300.00",tax:"10.00",total:"210.00"},
                {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"21.00",total:"320.00"},
                {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"10",invdate:"2007-09-02",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"11",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"12",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"13",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"14",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"15",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"16",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"17",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"18",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"19",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"20",invdate:"2007-09-02",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"21",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"22",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"23",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"24",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"25",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"26",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"27",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"28",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"29",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"30",invdate:"2007-09-02",name:"test3",note:"note3",amount:"410.00",tax:"30.00",total:"440.00"},
                {id:"1",invdate:"2010-05-24",name:"test",note:"note",amount:"300.00",tax:"10.00",total:"2111.00"} ,
                {id:"2",invdate:"2010-05-25",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"300.00",tax:"30.00",total:"430.00"},
                {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"300.00",tax:"10.00",total:"210.00"},
                {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"300.00",tax:"30.00",total:"430.00"},
                {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"300.00",tax:"10.00",total:"210.00"},
                {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"21.00",total:"320.00"},
                {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"10",invdate:"2007-09-02",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"11",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"12",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"13",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"14",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"15",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"16",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"17",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"18",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"19",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"20",invdate:"2007-09-02",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"21",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"22",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"23",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"24",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"25",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"26",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"27",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"28",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"29",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"30",invdate:"2007-09-02",name:"test3",note:"note3",amount:"410.00",tax:"30.00",total:"440.00"},
                {id:"1",invdate:"2010-05-24",name:"test",note:"note",amount:"300.00",tax:"10.00",total:"2111.00"} ,
                {id:"2",invdate:"2010-05-25",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"300.00",tax:"30.00",total:"430.00"},
                {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"300.00",tax:"10.00",total:"210.00"},
                {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"300.00",tax:"30.00",total:"430.00"},
                {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"300.00",tax:"10.00",total:"210.00"},
                {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"21.00",total:"320.00"},
                {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"10",invdate:"2007-09-02",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"11",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"12",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"13",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"14",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"15",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"16",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"17",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"18",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"19",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"20",invdate:"2007-09-02",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"21",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"22",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"23",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"24",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"25",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"26",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"27",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"28",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"29",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"30",invdate:"2007-09-02",name:"test3",note:"note3",amount:"410.00",tax:"30.00",total:"440.00"},
                {id:"1",invdate:"2010-05-24",name:"test",note:"note",amount:"300.00",tax:"10.00",total:"2111.00"} ,
                {id:"2",invdate:"2010-05-25",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"300.00",tax:"30.00",total:"430.00"},
                {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"300.00",tax:"10.00",total:"210.00"},
                {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"300.00",tax:"30.00",total:"430.00"},
                {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"300.00",tax:"10.00",total:"210.00"},
                {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"21.00",total:"320.00"},
                {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"10",invdate:"2007-09-02",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
        ];
 function showId(){
      alert("id");
 };


  $(document).ready(function(){
      $("#list2").jqGrid({
          data: mydata2,
          cellEdit: true,
          viewrecords: true, 
          sortorder: "desc",
          datatype: "local",
          height: 'auto',
          rowNum:10,
          width:900,
          jsonReader: {
              repeatitems: false
          },
          rowList:[10,20,30],
              colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
              colModel:[
                      {name:'id',index:'id', width:60, sorttype:"int",formatter:function(cellvalue,options,rowobj){ return "<input type='text' name='id' οnclick='showId()' disabled='true' value='"+cellvalue+"'/>";}},
                      {name:'invdate',index:'invdate', width:90, sorttype:"date",formatter:function(cellvalue,options,rowobj){ return "<input type='text' name='date' value='"+cellvalue+"'/>";},editoptions:{dataEvents:[{type:'change',fn:function(e){alert("abc")}}]}},
                      {name:'name',index:'name', width:100,formatter:function(cellvalue,options,rowobj){ return "<textarea name='name_value' >"+cellvalue+"</textarea>";}},
                      {name:'amount',index:'amount', editable:true, edittype:'text',width:80, align:"right",sorttype:"float", formatter:function(cellvalue,options,rowobj){ return "<textarea name='amount' >"+cellvalue+"</textarea>";}},
                      {name:'tax',index:'tax',editable:true, width:80, align:"right",sorttype:"float", editable:true},          
                      {name:'total',index:'total',editable:true, width:80,align:"right",sorttype:"float"},              
                      {name:'note',index:'note', width:150, editable:false,sortable:false, editoptions:{dataEvents:[{type:'click',fn:function(e){alert("abc")}}]}}               
              ],
          cellsubmit:'clientArray',
          multiselect:true,
          rownumbers: true,
          sortname: 'name',
          pager: 'plist2',
          viewrecords: true,
          toppager:true,


       /*    grouping: true,
          groupingView : {
                  groupField : ['name'] 。
          },  */
          caption: "jqGrid Grouping Example"
      });
  }); 

  
</script>

<table id='list2'></table>
<div id='plist2'></div>





</body>
</html>

 

转载于:https://www.cnblogs.com/Lennyyi/p/5031592.html

weixin_30608131
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jqGrid知识概括
weixin_41005188的博客
01-17 223
jqGrid知识概括jqGrid简介jqGrid使用jqGrid案例 jqGrid简介 简介： jqGrid 是一个用来显示网格数据的jQuery插件，通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信。 文档比较全面，其官方网址为： jqGrid jqGrid教程 jqGrid特性： 基于jquery UI主题，开发者可以根据客户要求更换不同的主题。 兼容目前所有流行的web浏览器。 Ajax分页，可以控制每页显示的记录数。 支持XML，JSON，数组形式的数据源。 提供丰富的选
jqGrid5.5 版本
03-26
jqGrid是一款功能强大的JavaScript数据网格插件，专为Web应用程序设计，用于展示和操作大量结构化数据。在jqGrid5.5版本中，它提供了一系列的改进和新特性，使得数据管理和用户界面更加高效和易用。以下是关于jqGrid...
Jqgrid 详解
热门推荐
qq_27009517的博客
05-19 1万+
Jqgrid入门-显示基本的表格(一) 首先对Jqgrid网格插件做个简要的说明。在众多的表格插件中，Jqgrid的特点是非常鲜明的。 特点如下: 完整的表格呈现与运算功能，包含换页、栏位排序、grouping、新增、修改及删除资料等功能。 自定义的工具列。 预设的Navigator工具列，可以很容易的使用新增、删除、编辑、检视及搜寻等功能。 完整的分页功能。 按下任一栏位的标头，皆可以该栏位为排序项目。无论是升序或降序皆可。 预设的action formatter，可以快...
jqgrid使用总结
weixin_40259093的博客
09-05 266
jqgrid 日常使用总结
jqGrid列总计
LzzMandy的博客
11-19 1222
实现底部总计功能 footerrow : true, userDataOnFooter : true, jQuery("#list2") .jqGrid( { url: 'initlist', datatype: "json", height: 140, autowidth: true, ..
jqGrid合并表头
JS是编程界最好的语言的博客
08-21 576
这里写自定义目录标题jqGrid合并表头引入jqGrid这是我本地自己定义的数据插入数据核心设置最终效果 jqGrid合并表头 引入jqGrid (ps:要使用合并表头功能最低版本库貌似最低为4.3(再ps:错了勿喷),之前我使用4.0.0报错;) 这是我本地自己定义的数据 插入数据 ps:(清注意name值) 核心设置 注意要调用jqGrid的‘setGroupHeaders’方法; startColumnName属性:设置的是从colModel中的哪条name属性开始合并; numBerOfCol
jqgrid 相关
weixin_43299961的博客
04-01 250
jqgrid写在前面引入初始化取数据如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 写在前面 欢迎留言，1944276952，一起讨论。 引入 https://...
jqGrid
little_beauty的博客
03-08 1431
jqGrid初始化表格 obj['table'].jqGrid({ url: curPath + '/minstone/roomApply/getMyRoomApplyList', styleUI: 'Bootstrap', datatype: 'json', ...
jqGrid笔记
丹丘的博客
08-26 511
jqGrid笔记 api网站链接：https://blog.mn886.net/jqGrid/ 1. get 1.1 获取所有数据 $("#jqGrid").getRowData(); 1.2 获取所有id var ids = $('#jqGrid').getDataIDs(); 1.3 获取第一行 var rowData = $("#jqGrid").getRowData(ids[0]); ...
jqGrid合并行
nnaay_的博客
03-05 679
jqGrid实现合并行，代码如下： function GetGrid() { var $gridTable = $('#gridTable'); $gridTable.jqGrid({ autowidth: true, // multiselect: true, // rownumbers: true, height: $(window).height() - 24...
jqgrid
流浪猫
03-17 120
最近在写前端的一些东西用到了jqgrid.可是页面显示的日期总是无法成功便成想要的格式. 这样写页面出现的是NaN,按照网上的方法把srcformat的值换成u或者U都是NaN. 加注解@JsonSerialize(using=DateTimeSerializer.class) 的时候,DateTimeSerializer这个包却没有.网上说的那种改jqgrid源码的那种也行不通.请教各位有其...
jqgrid_doc
07-20
**jqGrid介绍** jqGrid是一款基于jQuery的开源插件，由Tony Tomov开发，用于创建交互式的、数据量丰富的网格视图。这个插件在Web应用程序中广泛使用，特别是那些需要展示大量结构化数据的场景。jqGrid提供了一系列...
jqGrid dialog例子
01-02
jqGrid 是一个强大的 jQuery 插件，用于在网页上创建、操作和展示表格数据。它提供了丰富的功能，如数据分页、排序、过滤、编辑等，使得数据管理变得直观而高效。在这个“jqGrid dialog 例子”中，我们看到 jqGrid ...
jqGrid完整实例
07-04
jqGrid是一款功能强大的JavaScript表格插件，用于在Web页面中展示和操作数据。它基于jQuery库，提供了丰富的功能，如数据排序、分页、搜索、编辑等，支持远程及本地数据源，广泛应用于数据密集型应用系统。在这个...
【React 】开发环境搭建详细指南
lph159的博客
07-24 1245
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
exlink2012的专栏
07-25 399
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
VUE中的重点*
qq_61132537的博客
07-22 1091
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
vue el-select的下拉树形结构 带检索功能
最新发布
Jokerxiuka的博客
07-26 194
【代码】vue el-select的下拉树形结构。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 236
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
jqGrid工作原理与入门示例
"jqgrid my first jqgrid demo" 在IT领域，jqGrid是一个强大的JavaScript插件，主要用于在Web页面上展示和操作表格数据。本资源主要介绍如何使用jqGrid以及其核心工作原理，这对于初次接触jqGrid的人来说是非常有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值