• jqGrid 使用及二次封装经验


    简介:

    JqGrid是一款功能强大的表格控件,支持排序,分组,分页,行内编辑,表格树,行内表格等多种功能. 基础平台在此基础上对其进行了进一步的封装及扩展.使得其更简单.更好用.

    维基文档地址

    常见属性设置

    属性名称 属性说明 是否必须 默认值
    datasource 数据源地址  
    pager 是否分页,如果设置成true,将创建分页框 true
    custom_pager 如果设置成true,将创建自定义分页框.注意,如果page的值未设置,将不会起到作用 false
    rownumbers 是否显示序列号 true
    colNames 列标题说明,数组  
    colModel 字段模型说明,object对象,name(绑定字段),sortable(是否排序字段),actions(操作列,数组),action_icons(图标列,数组)  
    autowidth 自动填充宽度 true
    altrow 是否显示斑马条纹 true
    jsonReader 数据源的补充说明(id,根元素) 有统一的格式,一般只要配置id就可以  
    tbar 工具栏说明,数组,扩展属性(可配置图标,按钮说明及事件,新增,修改,删除,导入,导出按钮有默认的标准图标  
    rowNum 每页行数 10
    multiselect 是否多选 true
    caption 标题  
    height 高度 auto
    grouping 是否分组 false
    groupingView 分组具体配置(详见示例) 对象 包括 groupField(分组字段),groupOrder(排序方向),gridCollapse(是否收缩)  

    控件事件

    控件名称 事件说明 是否必须 默认值
    onSelectRow 单击一行时发生的事件   null
    ondbClickRow 双击一行时发生的事件(方法) null

    常见问题

    • 如何获取grid选中的行的ID?
          var  rowid = $( "#searchResultList" ).getGridParam( "selrow" );  
    • 如何在表格中动态增加一行数据?
          //$("#jqgrid").addRowData(rowId, data, pos, idx);   
          //pos可以为[first,last,before,after],为后两者是需要指定相对的行ID   
          $( "#jqgrid" ).addRowData( "1" , { "name" : "test" , "age" :12},  "first" );  
    • 如何动态修改某行的数据内容,如某几列的值?
          //setRowData( rowid, data );   
          $( "#jqgrid" ).setRowData(  "1" , { tax: "5" , total: "205"  });  
    • jqgrid的常用属性?
          $( "#jqgrid" ).jqGrid({   
              url: "${ctx}/sys/role/search.dm" ,   
              colNames:[ "角色名称" ], //,"角色代码"   
              colModel:[ "roleName" ], //"roleCode"还可以用对象替换   
              jsonReader:{id: "roleId" ,root: "dataList" },   
              240,   
              height:250,   
              rowNum:20, //每页20条记录   
              pager:  "logListPager" , //分页显示的DIVID   
              sortname:  "actionTime" , //默认排序的列名   
              sortorder:  "desc" , //默认排序的顺序   
              scroll: true , //鼠标滚动翻页   
              onSelectRow:  function (rowid) {}   
          });  
    • 获取某一行的数据对象?
          var  rowid = $( "#searchResultList" ).getGridParam( "selrow" );   
          var  rowData = $( "#searchResultList" ).getRowData(rowid);  
    • 如何使用API动态修改选中的行?
          //true:重新加载表格数据, false:不重新加载表格数据   
          $( "#jqGrid" ).setSelection( "1" ,  true );  
    • 如何获取某一列的值
          var col= jQuery("#jqGrid ").jqGrid('getCol',4,false);//获取第4列的值
          var col= jQuery("#jqGrid ").jqGrid('getCol','name',false);//获取列名为name的列的值
    • 如何删除一行或多行
          var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");   
          $("#gridTable").jqGrid('delRowData', selectedId);
    • 一些常用的API
          $( "#jqgrid" ).resetSelection();   
          $( "#jqgrid" ).clearGridData();   
          $( "#jqgrid" ).setCell(rowid,colname,nData,cssp,attrp);
  • 相关阅读:
    Standford机器学习 聚类算法(clustering)和非监督学习(unsupervised Learning)
    cocos2d-x 消类游戏,类似Diamond dash 设计
    cocos2d-x精灵的添加和移动
    小学生四则运算测试网站文档更新
    第四次作业
    第三次作业
    第二周作业第三题_张东明
    第二章
    第二周的作业第二题_张东明
    第二次作业第3题_JH
  • 原文地址:https://www.cnblogs.com/ms_config/p/2080042.html
Copyright © 2020-2023  润新知