zoukankan      html  css  js  c++  java
  • jQgrid问题总结

    最近一段时间一直在使用jqgrid这个免费的插件,网上的资料也比较多、比较全,但是这里还是整理几个自己在开发过程中遇到的小问题。

    1.自动换行

      一行数据过多需要自动根据内容换行时,如果遇到在表格中的汉字换行或者空格换行的问题,可以在style标签中插入下面代码:

    1 .ui-jqgrid tr.jqgrow td 
    2 {
    3       white-space: normal !important;
    4       height:auto;
    5       vertical-align:central;
    6       padding-top:2px;
    7  }

        如果遇到一长串的英文单词,需要在英文单词内部换行(非空格处)问题时,可以在style标签中插入下面代码:

    td {word-wrap:break-word ; }

    2.触发jqgrid表格重载事件

    (1)不带参数的重载,其js代码如下

     1 $("#list").trigger("reloadGrid"); 

    (2)触发表格重载时可以带参数,其js代码如下:

     1 $("#list").jqGrid('setGridParam',{url:"192.168.1.1/web?param1="+param1+"&param2="+param1+"&param3="+param3}).trigger("reloadGrid"); 

    3.动态隐藏/显示列

      jqgrid提供API可以动态隐藏某些列,其js代码如下:

     1 $('#list').jqGrid('setGridParam').jqGrid('hideCol',['col1','col2','col3']); 

    jqgrid同时提供API可以动态显示某些列,只要将上述代码中的'hideCol'换成'showCol'即可。

    4.隐藏水平滚动条

      js代码如下:

     1 $("#list").closest(".ui-jqgrid-bdiv").css({ 'overflow-x' : 'hidden' }); 

    5.多层分组显示

      jqgrid提供了分组显示功能(group),其实这个可以用来多层分组,如下面的例子就是先以col1分组后,再分好的结果中再以col2分组

    1 grouping: true,        //打开分组功能
    2 groupingView : {
    3     groupField : ['col1', 'col2'],
    4     groupColumnShow : [false, false],
    5     groupText : ['<div style="font-size:medium">col1:{0}</div>', '<div style="font-size:medium">col2:{0}</div>'],
    6     groupCollapse : false,    //不折叠
    7     groupOrder: ['asc', 'asc'],
    8     groupSummary : [false, false]
    9 },

    6.使表头captain内容居中

      js代码如下

    1 $('#list').closest("div.ui-jqgrid-view")
    2 .children("div.ui-jqgrid-titlebar")
    3 .css("text-align", "center")
    4 .children("span.ui-jqgrid-title")
    5 .css("float", "none");
  • 相关阅读:
    能帮你找到网页设计灵感的16个网站
    [转]自定义SqlMembershipProvider方法
    C#实现的根据年月日计算星期几的函数
    分享一个我自己写的支持多条件组合查询的分页存储过程
    史上最强的福克斯遥控钥匙失灵解决方案(zt)
    在页面实现数据还原,在终止数据库进程时,报不能用kill来终结自己的进程
    ViewState使用兼谈序列化
    jQuery 的上传图片预览插件
    Asp.net 备份、还原Ms SQLServer及压缩Access数据库
    aspnet_Membership表的意义
  • 原文地址:https://www.cnblogs.com/flyrui316/p/4996116.html
Copyright © 2011-2022 走看看