jqgrid

简述原理：引入jquery-ui插件，设置好表格所需的字段变量以及字段属性 1、设置colName与colModel 　　colNames: ['过期时间''] 　　colModel:[{ 　　name:'expiration', 　　 index:'date', 　　width:90, 　　 align:"center", 　　editable:true, 　　 edittype:'text', 　　 editrules:{required:true}, 　　editoptions: { 　　 size:10, 　　 maxlengh:10, 　　dataInit:function(element){ 　$(element).datepicker({ 　　closeText: '关闭', 　　prevText: '<上月', 　　nextText: '下月>', 　　currentText: '今天', 　　monthNames: ['一月','二月','三月','四月','五月','六月', 　　'七月','八月','九月','十月','十一月','十二月'], 　　dayNamesMin: ['日','一','二','三','四','五','六'], 　　 weekHeader: '周', 　　dateFormat: 'yy-mm-dd', 　　firstDay: 1, 　

记录下自己开发的接口自动化测试平台： 　　 接口测试相对于UI测试来说测试成本低，相对稳定，变动不大，日常测试可使用postman、jmeter、python request等进行测试。 　　以下就介绍python request开发的框架来进行接口测试。功能满足批量测试，支持Excel导入数据库，自定义选中测试接口，图表测试统计等功能。 　　后端语言采用python的django来开发，之前没接触过django，本想用java web来做后台的，但还是想尝试下，所以便有了这个作品，好在过程还顺利，边做边学，几天就好框架弄好了，具体看下文提及的django。 开发构思： 　　1、主要想法来源：结合日常工作进行功能的设计； 　　2、接口测试过程的依赖关系：登录信息、接口之间的相互依赖关系； 　　3、接口测试数据来源：导入文件到数据库，手动增加数据或修改数据； 　　4、测试结果统计：图表统计，数据的筛选； 　　5、测试灵活性：多条、单条数据自动根据开发提供的结果与实际结果进行校验； 开发环境： 　　1、后台语言：python; 　　2、前端语言：jQuery、css、html、echarts; 　　3、数据库：mysql; 　　4、架构：面向对象； 　　5、后端框架采用：Django； 平台具备的功能点： 　　1、数据模板下载； 　　2、数据模板上传； 　　3、单条数据提交； 　　4

　　这篇文章是因为，我们在做的后台项目，里面有大量的表格统计，这个不可能自己手写，所以其中的表格使用的是jqgrid。 　　这个插件其实使用起来还是不错的，里面有很多的功能很赞。这篇博客就是自己的的一个记录，也是对以后项目的一个参考。因为有一些代码总是记不住。 首先就是引入这个插件所需要的js和css了，这个相信大家都不陌生，这个插件是基于jq的所以之前要引入jq，这个不详细的赘述了。然后就是他的基本结构，很简单，就是一个两个标签，一个是表格的内容，一个是翻页功能。 1 < div class ="jqGrid_wrapper" > 2 < table id ="table_list_1" ></ table > 3 < div id ="pager_list_1" ></ div > 4 </ div > table_list_1为这个表格的主要显示内容，而pager_list_1是显示翻页的地方，当然了， 如果你没有翻页的话，这个是可以不要的。 然后是比较重要的一部分了，我这里直接粘贴代码过来，然后在做解释。 1 $("#table_list_1" ).jqGrid({ 2 url:'__URL__/data_search' , 3 postData:{}, 4 datatype: "json" , 5 mtype: 'POST' , 6 height: 450 , 7

首先要确定一个问题： 你的数据返回的方式是 一次性加载完 还是 点击下一页重新请求服务器 ？ 根据你上边数据返回的方式，我们分类来处理。 第一种：点击下一页重新请求服务器 这种的话，每次点击下一页是需要重新请求服务器的，所以我们只需发送请求，然后后台从数据库select数据得到list，将list传给生成EXCEL的函数(一般都是用POI)。 比如：当用户搜索性别为女的学生时， 前端给后端发送post请求（带参数的） 后端响应第一页的数据。 而我们点击导出的时候，我们需要获取 搜索 操作的请求内容，发给后端。 经过我的不懈努力，我在 $("#grid") 对象中找到了上次请求的数据： 具体位置是在 $("#grid")[0].p.postData 。 那么我只需要获取这个对象，然后当用户点击导出按钮之后，带上 postData 的参数，发送导出文件的请求，然后后端根据参数查询出所有符合条件的student对象，组合成一个list，然后生成excel文件流，供用户下载。 **PS：**关于后端传文件流，前端如何保存为文件下载下来。这个我在第二种方式里边介绍过通过文件流异步实现下载文件，有兴趣的可以去看看。 第二种：一次性加载完 这一种，我在上一篇博客中已经介绍过这个方法，所以直接上连接。 传送门 ： 戳我 来源： oschina 链接： https://my.oschina.net

刷新jqgrid的数据：常用到刷新jqGrid数据的情况是，在用到查询的时候，根据查询条件，请求数据，并刷新jqGrid表格，使用方式如下： 1 if (jqgrid.parents(".ui-corner-all").length > 0 ) { 2 // 此处先判断jqgrid表格是否已经初始化过了 3 jqgrid.jqGrid("setGridParam" , { 4 postData: { "studentId" : studentId } 5 }).trigger("reloadGrid"); // 重新载入 6 } 7 $("#search_btn").click( function () { 8 // 此处可以添加对查询数据的合法验证 9 var orderId = $("#orderId" ).val(); 10 $("#jqgrid").jqGrid('setGridParam' , { 11 datatype: 'json' , 12 postData: { 'orderId': orderId }, // 发送数据 13 page: 1 14 }).trigger("reloadGrid"); // 重新载入 15 }); ① setGridParam用于设置jqGrid的options选项。返回jqGrid对象 ② datatype为指定发送数据的格式；

上周需要把一个项目中的普通table改成使用jQuery插件形式的表格，找到了jqgrid这个插件，本以为找个demo，查查api就能解决，没想到还是费了一番的功夫，在这里记录总结一下。 本文实现的内容主要有：基础表格的绘制，实现分页功能，将jqgrid修改为响应式表格。 先贴一张表格样子图 jqgrid源码下载地址： https://github.com/tonytomov/jqGrid 英文api： http://trirand.com/blog/jqgrid/jqgrid.html 英文demo： http://www.guriddo.net/demo/guriddojs/ 中文demo： http://blog.mn886.net/jqGrid/ 中文api： https://blog.csdn.net/zsq520520/article/details/53375073 1、引入css和js文件 首先jqgrid必须使用在 HTML5的页面 中，不然表格的样式会错乱，影响使用。 需要引入的css，js文件和一些图标和字体 文件结构如下 images 文件下为表格中图标的图片 theme 中为表格的不同主题样式 fonts 文件下为使用Font Awesome图标所必须的字体文件 css文件 <!-- jqGrid组件基础样式包-必要 --> < link rel =

ylbtech-JavaScript-Tool：jqgrid jqGrid 是一个用来显示网格数据的jQuery插件，文档比较全面，附带中文版本。 1. 返回顶部 2. 返回顶部 3. 返回顶部 4. 返回顶部 1、 jqGrid提供了大量的选项设置，开发者可以通过设置选项对应值来控制jqGrid，比如表格的宽度、高度、数据类型以及列名称等等都是通过选项设置来完成的。jqGrid的选项一般是名称：值（name:value）的形式，也可以是对象(object)及数组（array）的形式配置。 jqGrid选项(Option) 调用jqGrid只需要执行以下代码: jQuery( "#grid_id").jqGrid(options); options即jqGrid的选项设置，请参照以下表格。 属性 类型 描述 默认值 ajaxGridOptions object 此项用于设置当表格设置获得数据时，ajax的全局属性，注意此项可能覆盖所有当前的ajax设置（包括error, complete和beforeSend 事件）。 empty ajaxSelectOptions object 此项用于设置在editoptions或searchoptions对象中通过dataUrl选择元素时， ajax的全局属性。 empty altclass string 交替行的类。

treegird 表格 function gridList() { function gridList() { $.jgrid.defaults.styleUI = "Bootstrap"; var $gridList = $("#gridList"); $gridList.jqGrid({ treeGrid: true,//启用树型Grid功能 shrinkToFit: true, //自适应宽度 treeGridModel: "adjacency",//表示返回数据的读取类型，分为两种：nested和adjacency,默认值：nested ExpandColumn: "so_managerid",//树型结构在哪列显示 url: "/SystemModule/Sys_Organize/GetTreeGridJson",//要访问的后台地址 height: $('body').height() - FullHeight - 155, datatype: "json", autowidth: true, rownumbers: true, colNames: ['主键', '名称', '负责人'],//, '电话', '备注' colModel: [ { name: "so_id",hidden:true, key: true }, { name: 'so_fullname',

项目中使用jqgrid展示数据，最近遇到这样一个问题，需要根据数据库中的关联关系动态生成列，解决方案如下： 前台代码： $(document).ready(function () { var ColN, ColM, ColD, capEN; var sPath = window.location.pathname; var sPage = sPath.substring(sPath.lastIndexOf('/') + 1); //alert(sPage); $.ajax({ url: sPage+'?method=getGridHeadData', type: "POST", contentType: "application/json; charset=utf-8", data: {}, dataType: "json", success: function (data, st) { if (st == "success") { ColN = data.rowsHead;//jqgrid heading data ColM = data.rowsM; // its column model ColD = data.rows; // Data createGrid(); } }, error: function () { alert("Error with AJAX

在表格中常常需要调整表格中数据的显示顺序，我用的是jqgrid,实现原理就是将表中的行数保存到数据库中，取数据时按行进行排序 1、上移，下移按钮 <a href= " javascript:void(0) " onclick= " operateWithOneRowById(up) " class = " linkButton " >上移</a> <a href= " javascript:void(0) " onclick= " operateWithOneRowById(down) " class = " linkButton " >下移</a> 2、上移下移 功能 function operateWithOneRowById(callback) { var selected = tableObj.jqGrid( ' getGridParam ' , ' selrow ' ); if (selected == null ) { alert( " 请用鼠标点击选择一行后再执行操作! " ); return ; } return callback(selected); } 3、这里的callback是up和down 函数的合并，那么我们再看看这两个函数 function up(selected) { if (selected == 1 ) return ; else {