位置: 编程技术 - 正文

Bootstrap嵌入jqGrid,使你的table牛逼起来(bootstrap js插件)

编辑:rootadmin

推荐整理分享Bootstrap嵌入jqGrid,使你的table牛逼起来(bootstrap js插件),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:bootstrap js插件,bootstrap js插件,bootstrap js插件,bootstrap jumbotron,bootstrap js,bootstrap grid,bootstrap嵌入网页,bootstrap grid,内容如对您有帮助,希望把文章链接给更多的朋友!

Bootstrap原生的table组件只能满足简单的数据展示,满足不了更富有操作性的要求。当然了,你可以找到一款叫做“DataTables-1..”的基于bootstrap的table组件,但如果你对API看得不甚了解的话,用起来可就痛苦了,但是如果你选择使用jqGrid,那么本篇教程就给你带来了解决这种富操作性table的解决方案。

一、效果展示

OK,就展示这一张图片,相信你已经爱上了bootstrap版的jqGrid,和bootstrap很兼容,简直完美,当然了,这需要我们在缘由的jqGrid上进行一些改动,同时对组件进行一定的封装。

二、资源下载

我反正挺热爱分享的,关于jqGrid的组件代码,你可以从jqGrid的官网上下载,但是下载下来需要一些改动,那么我直接将改动后的jqGrid上传到了git,你只需要把提供的文件导入到你对应的项目即可。

另外,你还需要下载一个jquery-ui-1..0.custom.css,我就不提供下载地址了,不过我相信,你肯定会找得到,就算是用频出事故的度娘,你也可以找得到。

三、本篇都讲一些什么

自从建了QQ群后,“络绎不绝”的有同学加入到群中,但我也发现,进群的一步人直接来找我要demo,或者项目代码,这个我可不喜欢,自己动手做一做,去实现以下,改造一下,才会是你自己的东西,完全照搬我的代码显然你得不到更多的帮助,希望以上同学学习的时候再主动一些。

说完上面这点小废话后,我们言归正传,来说说我们本篇博客主要来讲些什么,什么才是在bootstrap中嵌入jqGrid的关键所在,我总结有如下:

jqGrid在bootstrap中的布局方案jqGrid自身的构造化参数jqGrid在bootstrap中的模块化jqGrid的数据操作

暂定分为以上部分来说明,但必须注意,限于篇幅,博客中只提供思路和部分代码。

①、 jqGrid在bootstrap中的布局方案

介于每个人的项目千差万别,列出的代码中我们只关注jqGrid部分:

id="jqgridForm",此处我们为jqGrid包含一层检索条件的form表单,也就是效果图上列出的search部分,当点击检索按钮时,就把form表单域的查询条件提交到controller,进而获取的数据。id="searchBtn",定义检索按钮,后面讲模块化会用得到。<table id="pageGrid" rel="jqgridForm" class="jqgrid"></table> <div id="pageGridPager"></div>定义jqGrid的table元素和jqGrid的footer元素,使用的规则我的项目暂时约定这种规则,你也可以有你自己的规则。通过rel指定form的id,可以更便捷的使用table的检索form。②、 jqGrid自身的构造化参数

构造化参数,我把他提取到了①中的my_pay_list.js中。

一点都不熟悉jqGrid的同学,建议先看jqGrid的demo,以及jqGrid的官方文档,当然了,对于已经熟悉jqGrid的同学,doc和demo肯定是必看的。

以上文件列出的属性非常多,对于jqGrid,我不做过多的介绍,本篇的主旨主要来介绍如何将jqGrid嵌入到bootstrap,那么重点就不在于介绍jqGrid上,我只介绍几个关键点:

formatter: function(cellvalue, options, rowObject) {,formatter还是很经常要使用的,那么对于如何获得对应单元格的值就很重要,我的jqGrid使用的是xml(datatype : “xml”)数据格式,那么可通过$(rowObject).find("deal_id").text()找到对应deal_id列的值。xmlReader : { repeatitems : false, root : "PageGrid",,注意xmlReader中的参数值,在接下来介绍④jqGrid的数据操作会细节介绍,和后台的xml数据封装有关系。$("#pageGrid").footerData("set", {image_str : "支付总花费:", order_price : json.message});,关于footerData方法,使用起来也很方便,效果可参照效果图。initEnv(jqOption);方法,在页面onload后,我们将jqGrid的初始化参数传递给initEnv方法,后续③jqGrid在bootstrap中的模块化会介绍initEnv方法。③、jqGrid在bootstrap中的模块化

②中我们注意到initEnv方法,那么这个方法内部就是专门针对jqGrid做的模块化封装工作。

initEnv方法

该方法中,我们将会看到initLayout方法和initUI方法,具体内容稍候介绍。

Bootstrap嵌入jqGrid,使你的table牛逼起来(bootstrap js插件)

initLayout

也就是说,在窗口缩放的时候,我们为jqGrid重新绘制宽度,使其自适应于bootstrap的响应式布局。使用的方法就是jqGrid的setGridWidth方法。

initUI

如果你曾看过我之前的系列文章,对于initUi方法就不会太陌生,熟悉dwz的朋友,自然也不会陌生,我项目中的大部分模板还是依赖于dwz,谢谢这些前辈们。

var $form = $("#" + $("#pageGrid").attr("rel"));由于我们在jqGrid上关联了form检索条件的form表单,此处就可以将form表单对象取到,取到form表单对象,自然也就去得到了检索域的值($form.serializeArray())。拿到form表单的检索域值后,此时就需要做一番处理了。我们知道,jqGrid在向controller传递参数时,必然需要上送分页、排序的相关字段(page、rows、sord、sidx),使用的方法是$("#pageGrid").jqGrid({postData:xxx});,通常情况下,我们上送form表单时,只需要使用$form.serializeArray()就可以,但如果此时,只是将xxx替换为$form.serializeArray(),那么controller中将不会获得分页、排序的相关字段(page、rows、sord、sidx),这是一个冲突,此时怎么处理呢?解决办法就是将form表单数据对象化(array2obj 方法),然后我们再通过var op =$.extend({url:$form.attr("action"),postData:YUNM.array2obj($form.serializeArray()),},jqOption);$("#pageGrid").jqGrid(op);将检索域的值和分页、排序的相关字段一起上送到controller。$("#searchBtn", $form).click通过封装click事件,将jqGrid的数据重新加载。$(".btn", $form).each(function() {此处的方法将检索button去圆角,使其更贴合jqGrid,见效果图。④ 、jqGrid的数据操作

数据操作部分,我认为包含有 检索参数传递、分页排序参数传递、sql语句的编写。

关于参数传递,前端的参数封装在③中已有介绍,我们来看一看controller中如何处理数据的。

首先,我们来定义PageGrid,也就是jqGrid中xmlReader的数据源。

项目中需要xstream.jar,自行下载。

XStreamComponent.java

主要将pageGrid封装为xml对象,进而传递会前端。

MapCustomConverter.java

主要将数据库中获取的hashmap转换为标准的xml格式数据。

BaseConditionVO.java

分页的查询数据对象,包括分页、排序、检索域。

将xml写入到输出流中。

定义完了这些基础的对象,接下来,我们就要着手获取数据和传递数据了。

我们来详细说明一下: 1. XStreamComponent.newInstance()创建xml流对象。 2. BaseConditionVO vo = getBaseConditionVOForTable();创建分页查询参数对象。 3. vo.addParams("name", getPara("name"));将检索域的值放入到查询对象中。 4. dealOrderService.getByIssueUid(vo, vo.createRowBounds());mybatis的分页查询方式,超简单,之前一个群里的朋友专门做了一种mybatis的分页组件,我觉得用原始的mybatis查询方法更有效率,之后,我们会写出对应的mybatis中xml的sql写法。 5. renderXml(response, xmlResponse.replaceAll("__", "_"));将数据写入到jsp的out输出流中。

最后,我们来介绍,通过mybatis如何获取分页数据。

mapper.java

想mapper.xml传递的两个对象,分别是BaseConditionVO 还有分页的RowBounds ,xml中sql就会自动分页。

mapper.xml

你完全可以不关注RowBounds ,mybatis内部会自动为你封装好limit的。检索域的name可以直接通过mo.name或得到。orderField、orderDirection也传递过来了。

到此为止,整篇的Bootstrap嵌入jqGrid就圆满结束了,ok,使你的table牛逼起来吧!

asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载) 本文实例讲述了asp.net+jquery.form实现图片异步上传的方法。分享给大家供大家参考,具体如下:首先我们需要做准备工作:jquery点击此处本站下载。jquery.

jQuery插件AjaxFileUpload实现ajax文件上传 本文实例为大家分享了AjaxFileUpload实现文件上传的具体代码,供大家参考,具体内容如下jQuery插件AjaxFileUpload用来实现ajax文件上传,该插件使用非常简单

jQuery插件ajaxfileupload.js实现上传文件 AjaxUpLoad.js的使用实现无刷新文件上传,如图1、创建页面并编写HTML上传文档:divclass="uploadFile"spanid="doc"inputtype="text"disabled="disabled"//spaninputtype="hidden"id="hidF

标签: bootstrap js插件

本文链接地址:https://www.jiuchutong.com/biancheng/385798.html 转载请保留说明!

上一篇:Struts2+jquery.form.js实现图片与文件上传的方法

下一篇:asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)

  • 已知税金及附加怎么算增值税
  • 向银行借款产生的利息
  • 为什么要计提递延所得税
  • 分公司可以独立承担法律责任吗
  • 自来水开出发票的税率是多少
  • 建筑企业外地预缴
  • 房地产企业成本分摊方法整理(附案例分析)
  • 公司报销费用发票怎么开
  • 个税全年一次性奖金单独计税
  • 个人独资交什么税?
  • 流动比率计算公式速动比率
  • 利息收入交税会计分录怎么做
  • 外地办事处能交当地社保吗
  • 出口供货企业
  • 一般纳税人怎么交税
  • 非汉语是什么意思
  • 减税真的能有效推动经济增长吗?
  • 发票专用章的规格大小
  • 营改增后餐饮业税种
  • 房产企业竞标取消通知
  • 报销差旅费必须要车票吗
  • 收入不交税怎么处理
  • 无发票的支出如何入账
  • 过路费可以抵税吗
  • win10用户头像错误 设置用户头像失败,请再试一次
  • 如何用腾讯电脑管家删除文件
  • git pull远程
  • 会计科目明细分类科目表
  • Win11 Build 22000.348更新补丁KB5007262预览版发布(附更新修复内容汇总)
  • uniapp页面loading
  • 固定资产加速折旧方法
  • 睡莲怎样养
  • phpmvc框架工作原理
  • 阿尔卑斯山百度百科
  • 金税盘干嘛用
  • 命令who的含义
  • chkdsk.exe/f命令
  • 指令获取
  • 税控盘抵扣怎么做账
  • 焊材领用发放管理
  • 预收物业费纳税义务发生时间
  • 长期股权投资核算的权益法包括哪些内容
  • access怎么提取数据
  • 贸易企业出口退税计算方法
  • 家具工厂生产
  • 个人劳务报酬的个税
  • 建筑业挂靠企业所得税如何收取?
  • 工商年报认缴时间过期了怎么办
  • 开出增值税发票确认收入分录?
  • 代扣代缴的增值税怎么做账
  • 发票作废了还能恢复吗?
  • 公司坏账率一般多少
  • 获取sql
  • 自动软件脚本
  • mysql数据库-数据库和表的基本操作
  • sql取两个时间的间隔天数
  • windows server 202
  • 三星电脑安装系统为什么进入不了安装页面
  • centos安装选择哪个
  • 系统图工具
  • icg是什么文件
  • windows7旗舰版开机声音
  • 微软报错是什么意思
  • win7系统笔记本无线网络找不到
  • WIN10安装教程
  • 游戏开发那些事
  • 微信小程序tabbar字体颜色
  • js鼠标滚动页面触发事件
  • shell脚本-n
  • js中的!
  • jquery怎么打开
  • 大学生活最后的日子
  • javascript零基础
  • 可分割项目
  • 福建2021年水利水电招聘
  • 企业未代扣代缴个税能退税吗
  • 新入职税务人员给总局的回信
  • 潍坊市区面积多大
  • 南京政务服务中心
  • 2018年3月增值税申报期限
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设