有一个需求是需要用jq-Grid展示一个可以折叠的表格,并且要求在页面初始化的时候就将表格折叠起来,我看了一下文档可以给列表增加 toolbar: [true, "top"],caption:"标题",可以实现,需要每次点击页面之后列表默认是展开的

 gridComplete: function () {
$("#newjqGrid").closest("#gview_newjqGrid").css({"overflow-x": "hidden"})
$("#newjqGrid").closest(".ui-jqgrid-bdiv").css({"overflow-x": "hidden"});
if ($("span.ui-jqgrid-headlink").hasClass("glyphicon-circle-arrow-up")) {
$("span.ui-jqgrid-headlink").removeClass("glyphicon-circle-arrow-up").addClass("glyphicon-circle-arrow-down")
}
},

通过改变类名后,列表第一次会折叠,第二次失效,于是我又想到给元素添加点击事件,

 gridComplete: function () {
$("#newjqGrid").closest("#gview_newjqGrid").css({"overflow-x": "hidden"})
$("#newjqGrid").closest(".ui-jqgrid-bdiv").css({"overflow-x": "hidden"});
if ($("span.ui-jqgrid-headlink").hasClass("glyphicon-circle-arrow-up")) {
$("span.ui-jqgrid-headlink").trigger("click")
}
},

这样还是达不到预期的效果,我在想是不是发生冒泡,所以没达到预期的效果,于是在if判断里面加了 return false 仍然达不到效果,于是我在切换元素类名的时候同时触发点击事件,最终达到预期的效果

 gridComplete: function () {
$("#newjqGrid").closest("#gview_newjqGrid").css({"overflow-x": "hidden"})
$("#newjqGrid").closest(".ui-jqgrid-bdiv").css({"overflow-x": "hidden"});
if ($("span.ui-jqgrid-headlink").hasClass("glyphicon-circle-arrow-up")) {
$("span.ui-jqgrid-headlink").removeClass("glyphicon-circle-arrow-up").addClass("glyphicon-circle-arrow-down")
$("span.ui-jqgrid-headlink").trigger("click")
return false
}
},

jq-Grid 能折叠的表格的更多相关文章

  1. easyui 折叠数据表格使用

    因为要用到折叠数据表格 但是官网上的例子不能展示 费了好大劲 走了很多弯路 现在能显示出数据 以前大多都是看别人写的文章 自己解决问题的时候几乎没记录过 现在想想真不是好习惯 特此记录分享出来 有需要 ...

  2. WPF中Grid实现网格,表格样式通用类

    /// <summary> /// 给Grid添加边框线 /// </summary> /// <param name="grid"></ ...

  3. WPF中Grid实现网格,表格样式通用类(转)

    /// <summary> /// 给Grid添加边框线 /// </summary> /// <param name="grid"></ ...

  4. jQuery treetable【表格多重折叠树功能及拖放表格子元素重新排列】

    今天有个表格需求做到多重折叠子元素功能,仔细想了下实现原理, 1.在html中,把父子节点的关系写在自定义属性,但对于节点是否有孩子(hasChild),是否是最后一个节点(isLastOne),是否 ...

  5. ExtJs 学习之开篇(三)Ext.grid.Panel表格中的处理

    Ext.grid.Panel Ext.create('Ext.grid.Panel',{        title:'测试表格',        width:400,        height:20 ...

  6. easyui源码翻译1.32--TreeGrid(树形表格)

    前言 扩展自$.fn.datagrid.defaults.使用$.fn.treegrid.defaults重写默认值对象.下载该插件翻译源码 树形表格用于显示分层数据表格.它是基于数据表格.组合树控件 ...

  7. FineUI第十七天---- 表格之扩展列

    {          sb.AppendFormat(]); 1.通过表格的SelectedRowIndexArray获得选中行的索引号列表: 2.通过表格的DataKeys(二维数组)获取本行的数据 ...

  8. 深入浅出ExtJS 第三章 表格控件

    3.1 表格的特性简介 >.Ext中的表格功能:包括排序/缓存/拖动/隐藏某一列/自动显示行号/列汇总/单元格编辑等实用功能; >.表格由类Ext.grid.GridPanel定义,继承自 ...

  9. ExtJS4.2学习(10)分组表格控件--GroupingGrid(转)

    鸣谢网址:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-17/179.html ------------- ...

  10. ExtJs中的Grid具体操作(笔记及心得)

    一.基本操作步骤 var cm=new Ext.grid.ColumnModel([ //对列的定义,cm是它的简写,作为真个表格的列模式,需要首先创建的{header:'编号',dataIndex: ...

随机推荐

  1. tool/js - ChineseToPinyin 汉语转拼音

    tool/js - ChineseToPinyin 汉语转拼音 Convert_Pinyin.js js如何简单实现汉字转成拼音的功能 pinyin-pro 官网 npm npm 安装 npm ins ...

  2. 错误:/etc/sudoers: syntax error near line

    错误 yang@ubuntu:/etc$ sudo cat sudoers >>> /etc/sudoers: syntax error near line 26 <<& ...

  3. Web服务器1-socket编程

    任务详情 基于华为鲲鹏云服务器CentOS中(或Ubuntu),使用Linux Socket实现: time服务器的客户端服务器,提交程序运行截图 echo服务器的客户端服务器,提交程序运行截图,服务 ...

  4. C语言中局部变量和全局变量关于释放

    1.全局都属于静态,局部区分静态非静态,局部静态和全局的区别在于可见范围,局部能使用外部看不见的意思,本质相同的. 2.如果是全局变量或局部静态变量,编译器会为其分配一个位于静态存储区的地址.这个地址 ...

  5. ubuntu测网速speedometer

    下载安装speedometer sudo apt-get install speedometer 查询需要测速的网卡 ifconfig 测速 speedometer -rx enp2s0 执行效果图如 ...

  6. [2002年NOIP普及组] 选数

    已知 n 个整数 x1,x2,-,xn,以及一个整数 k(k<n).从 n 个整数中任选 k 个整数相加,可分别得到一系列的和.例如当 n=4,k=3,4 个整数分别为 3,7,12,19 时, ...

  7. PVE使用vlan

  8. exp1-Password engine-加密API实现与测试

    加密API实现与测试 181210 1.准备工作 下载并查找GMT 0018-2012密码设备应用接口规范原始文档进行学习. 2.实现GMT 0018-2012接口函数 实现GMT 0018-2012 ...

  9. shell语法3-expr命令、read命令、echo命令

    一.expr命令(注:常常配合``或者$()来取得所求的值) 1.expr用于求表达式的值:expr 表达式 注意: (1)用空格隔开每一项(2)用反斜杠放在shell特定的字符前面(发现表达式运行错 ...

  10. 关于jsp 中数字格式化<fmt:formatNumber>标签的用法

    刚刚一个我负责的网站,出现了一个bug ,在之前没有遇到过,而且生产环境运行了4/5年了也没有发生该问题,今天发生了.所以查了一下<fmt:formatNumber>标签的用法,自己记录一 ...