当前位置: 首页 > news >正文

jqGrid 基础

新学,有错请指教。

//加载数据

jQuery("#grid_id").jqGrid({                  //<table id="grid_id"></div>

    url: "UserServlet?method=getList",    // 加载数据时访问的url     具体的返回可以是xml,json

    datarype:"json"                              //返回的数据类型,后台需要返回一个json字符串 json,xml,xmlstring,local,javascript,function

    mtype : 'GET'                                //请求的方式     GET,POST

    height: $(window).height(),              //设置表格高度  auto,%值

    autowidth:ture,                              //打开浏览器‘宽度自测’

 colName:['用户名','密码'],   // 表格表头 

    colModel:[

                {name : 'myac',index :'myac',width : 80,formatter:'actions',delOption:true},

                {label : '用户',name : 'user',index :'user',width : 80,},

                 ],

   pager : "#gridPager",                       //导航栏,分页组件<div id="gridPager"></div>

   rowNum : 10,                                //设置显示记录条数,默认20,若返回的记录条数大于rowNum,grid只会显示rowNum规定的条数

   rowList : [10,20,30],                     //用与设置grid能够接受的rowNum值

   viewrecords:true,                           //设置是否显示总条数

   sortname : "time",

   sortorder : 'asc',                             //排序的列,倒序、顺序             asc/desc

   multiselect: true,                           //开启多选

   rownumber : true,                          //左侧的行号

   loadonce:                                   //若设置成true,则只从服务器请求一次数据,datatype被修改为local,且以后所有的操作都是基于客户端的操作

   subGrid: ture                                //默认为false,展开子格

   subGridUrl

   subGridModel

   subGridRowExpanded:function(){}     //当点击“+”展开子表格时,将触发此选项定义的事件方法;

  subGridRowColapsed                          //当点击“-”收起子表格时,将触发此选项定义的事件方法;

   

  width:                                      //调整表格大小

  height                                      //调整表格大小

 

   pamNames :[]                                //用于设置jqgrid要向server传递的参数名称

   jsonReader:[]                               //用于解析server放回的json数据 

});

//jQuery(window).height()代表了当前可见区域的大小,

//而jQuery(document).height()则代表了整个文档的高度,可视具体情况使

 

 pamNames:默认值

prmNames : {

page:"page", // 表示请求页码的参数名称

rows:"rows", // 表示请求行数的参数名称

sort: "sidx", // 表示用于排序的列名的参数名称

order: "sord", // 表示采用的排序方式的参数名称

search:"_search", // 表示是否是搜索请求的参数名称

nd:"nd", // 表示已经发送请求的次数的参数名称

id:"id", // 表示当在编辑数据模块中发送数据时,使用的id的名称

oper:"oper", // operation参数名称

editoper:"edit", // 当在edit模式中提交数据时,操作的名称

addoper:"add", // 当在add模式中提交数据时,操作的名称

deloper:"del", // 当在delete模式中提交数据时,操作的名称

subgridid:"id", // 当点击以载入数据到子表时,传递的数据名称

npage: null,

totalrows:"totalrows" // 表示需从Server得到总共多少行数据的参数名称,参见jqGrid选项中的rowTotal

}

 

列名:colNames

colNames : [ '操作', '用户帐号', '用户密码', '所属权限组', '员工id'],

列属性:colMode                      

label:标签,标记                    当colNames数组为空时,定义此列的标题。

name:对象的属性名                  其中保留字包括subgrid、cb、rn

index:索引                            //排序,和向server传递参数的名称

align                                   //日期格式,可用/,-和.。作为间隔符。y、Y、yyyy用于4位年,YY、yy用于2位的月,d、dd用于日期

key                                      //设置主键列

hidedlg                              //该值不会出现在模式对话框中,默认值为false

width:宽度                             //  px单位

hidden:false                     //该列是否隐藏,默认false

align:center                      //居中

editable:可编辑的

editoptios:

edittype                           定义行编辑和表单模式的编辑类型,可以是text、textarea、select、checkbox、 password、button、image和file。

editrules    

datefmt                          //日期格式,可用/,-和.。作为间隔符。y、Y、yyyy用于4位年,YY、yy用于2位的月,d、dd用于日期                  

sortable:true                   //该列是否可以排序 ,默认true

sorttype                        当datatype为local时,用于定义排序列类型。可取int/integer(整数)、float/number/currency(小数)、date(日期)、text(文本)

resizable: true,              //该列尺寸是否能更改,默认true

fromoptions                // 定义表单编辑的各种选项

formatter:'actions'           //用来预设类型或格式化该列的自定义函数名 ,常用预设格式:integer,date,currency、number

formatteroptions

formatter: function (cellvalue, options, rowObject) {

    if (cellvalue == '1') return "<img src='/Content/Images/checkokmark.gif'/>";
    if (cellvalue == '0') return "<img src='/Content/Images/checknomark.gif'/>";
}

delOption:true

删除(使用给出的actions)

editurl:"userServlet?method=delete",

 

jqGrid  API:

     jQuery("#list4").jqGrid('addRowData',i+1,mydata[i]);                         //加载本地数据  datatype:local

     jQuery("#gird_id").jqGrid('navGrid','#gridGager',{edit:false,add:false,del:false,position:'right'});  

   //设置的就是不显示编辑、添加、删除按钮(在分页组件里)

    jQuery("#grid_id").jqGrid('getGridParam','selrow');                  //返回选中行的id

 

   jQuery("#grid_id").jqGrid('getRowData',rowId);                       //获得选中行数据,rowId 行号

   jQuery("#grid_id").jqGrid('delRowData',rowId);                       //删除一行记录,servser不会删除

  jQuery("#grid_id").jqGrid('setRowData',rowId,datarow);            //更新一行数据,server不更新

  jQuery("#grid_id").jqGrid('addRowData',rowId,datarow);           //添加一行数据,server不添加

  jQuery("#grid_id").jqGrid('setSelection',"rowId");                      //选中某一行

 

  jQuery("#grid_id").jqGrid('editRow',rowId)                            //编行行

 jQuery("#rowed1").jqGrid('saveRow',rowId);                           //保存

 jQuery("#rowed1").jqGrid('restoreRow',rowId);                       //取消

 

  jQuery("#grid_id").jqGrid('getGridParam','selarrrow');              //返回多行被选中的id,

 jQuery("#grid_id").jqGrid('getDataIDs');                                //获得所有巨鹿的id

  jQuery("#grid_id").jqGrid('getGridParam','records')               //获得总记录条数

 

重新载入数据:

  jQuery(grid_selector).setGridParam({
        data : data[0].dataList
       }).trigger("reloadGrid");

清空数据:

$(grid_selector).clearGridData();

转载于:https://www.cnblogs.com/yjjj/p/4275753.html

相关文章:

  • 利用KMP算法解决串的模式匹配问题(c++) -- 数据结构
  • 高级排序算法之归并排序
  • C#winform程序安装时自动卸载新版本覆盖旧版本
  • 第二次实验报告
  • 数据库原理 知识点总结
  • Express初识
  • MyBatis Dynamic SQL 1.1.1 发布,生成动态 SQL 的框架
  • 21个值得收藏的Javascript技巧
  • 43. Multiply Strings字符串相乘
  • displayport-2
  • 他山之石——运维平台哪家强?
  • 曾刷新两项世界纪录,腾讯优图人脸检测算法 DSFD 正式开源 ...
  • String Boot中@Controller和@RestController的区别?
  • 加入lib
  • form 表单中input 使用disable属性
  • python3.6+scrapy+mysql 爬虫实战
  • SegmentFault for Android 3.0 发布
  • 【mysql】环境安装、服务启动、密码设置
  • 【前端学习】-粗谈选择器
  • 【跃迁之路】【641天】程序员高效学习方法论探索系列(实验阶段398-2018.11.14)...
  • CoolViewPager:即刻刷新,自定义边缘效果颜色,双向自动循环,内置垂直切换效果,想要的都在这里...
  • Javascript 原型链
  • Leetcode 27 Remove Element
  • Linux gpio口使用方法
  • Linux下的乱码问题
  • Python socket服务器端、客户端传送信息
  • Python利用正则抓取网页内容保存到本地
  • Rancher如何对接Ceph-RBD块存储
  • swift基础之_对象 实例方法 对象方法。
  • Vim Clutch | 面向脚踏板编程……
  • webpack4 一点通
  • 高度不固定时垂直居中
  • 工作中总结前端开发流程--vue项目
  • 官方解决所有 npm 全局安装权限问题
  • 简析gRPC client 连接管理
  • 模仿 Go Sort 排序接口实现的自定义排序
  • 驱动程序原理
  • 如何利用MongoDB打造TOP榜小程序
  • 如何设计一个微型分布式架构?
  • 世界上最简单的无等待算法(getAndIncrement)
  • 为什么要用IPython/Jupyter?
  • 找一份好的前端工作,起点很重要
  • AI又要和人类“对打”,Deepmind宣布《星战Ⅱ》即将开始 ...
  • hi-nginx-1.3.4编译安装
  • Spring Batch JSON 支持
  • #Linux杂记--将Python3的源码编译为.so文件方法与Linux环境下的交叉编译方法
  • #LLM入门|Prompt#1.7_文本拓展_Expanding
  • #每天一道面试题# 什么是MySQL的回表查询
  • #图像处理
  • $.ajax()方法详解
  • $.type 怎么精确判断对象类型的 --(源码学习2)
  • (39)STM32——FLASH闪存
  • (ros//EnvironmentVariables)ros环境变量
  • (二)丶RabbitMQ的六大核心
  • (附源码)springboot炼糖厂地磅全自动控制系统 毕业设计 341357