雪一更--Tech&Wk_Present_WebUI_JqGrid_part_1

target : web UI grid - jqueryGrid

---

1. reference

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>jquery</artifactId>
    <version>3.5.1</version>
</dependency>

静态资源放在 resouces/static,   动态及其他资源在 resource/templates

2. main 

1. server 端返回给 front-end 的 JqueryGrid 的数据格式必须包含如下属性,为JqueryGrid 所要求的格式.

---

在前端数据承载量范围内，优先将全部数据一次传给前端. 而后在前端JS 逻辑分发.

reference : 

https://www.cnblogs.com/bayu/category/1230361.html

11/27/2020  jqGrid 使用localData,而非ajax请求remote数据.  jqGrid 数据行设置  dataType : 'local'

另一种方法是: $('gridTableId').jqGrid('addRowData', Index + 1, rows[index]) , 从 rows 中遍历加载.

---

jqGrid  treegrid 加载本地数据

2020-11-29

reference ： https://www.cnblogs.com/bayu/p/9447505.html

reference : https://www.cnblogs.com/bayu/category/1230361.html

---

 

---

jqGrid 常用事件

        gridComplete:function(){
           alert("JqGrid alert");
        },
        ondblClickRow:function(rowid,iRow,iCol,e){
            displayUserSpecifyValidatedDetail(rowid);
        }

       var dbClickedRow = $('#legacySAPValidationInfoNav').jqGrid('getRowData',rowId);

ondblClickRow : (rowid, iCol, cellcontent, e)  当点击单元格时触发, rowid: 当前行id; iCol: 当前单元格索引; cellContent: 当前单元格内容; e : event 对象.

getRowData : rowid or none,   返回: array[] 

返回指定行的数据，返回数据类型为  name:value, name 为 colModel中的名称，value 为所在行的列的值,如果根据rowid找不到则返回空. 在编辑模式下

不能用此方法来获取数据，它得到的并不是编辑后的值.

 

formatter : 队列进行格式化时设置的函数名或者类型, colModel:[{ name:'demo', formatter: function(cellvalue,options,rowObject){ return  xx }

formatoptions : array, 对某些列进行格式化的设置。

$('#jqGridId').jqGrid('clearGridData');

---

2020-12-08

local 数据加载，datatype 大小写错误导致数据无法获取，而且向远程默认请求。

---

2020-12-25

JqGrid 单元格对值 formmater 处理， JqGrid 内置有部分 formmater , 

自定义 formatter 接口

---

jqGrid  

合并单元格，注意，如果用的不是加载本地数据的方法，需要把合并行和列的方法放在 gridComplete: function( a, b, c) { ... } 加载事件函数里。

---

2021-01-08 21:42:37

jqGrid High light 信息,使用 cell formatter 的相关功能

注意可以返回 

formatter: function( cellvalue, options, rowObject) {

　　"<a onClick='showRow(\" + rowObject.property + \")'> text content </a>"

}

reference:

https://www.cnblogs.com/yechangzhong-826217795/p/5898883.html

---

2021-01-15

jqGrid data item id 的缘故，导致merge 功能不正常，实际中，应该合并的item id 全相等所致异常。

---

jqGrid merge 功能。

1. 在 jqGrid 相关colModel 里为相应param 设置 cellattr  

---

2021-01-18

 javaScript 为元素绑定事件

$('#btn').click(function(){  // operator })

doucment.getElementById('#eleId').addEventListener('click', function(){ } );

---

checkBox

jqGrid 设置属性

---

点击 表头 checkBox 时,表格全选或全不选，触发的事件 onSelectAll : function ( rowids, statue) { // customer };

rowids : 表格的所有行 id, 即设置了 key=true 那一列的值，如果设置了多列 key  = true, 只选取第一个.

statue : true / false, 全选为 true, 全不选为 false.

获取行 ID， 获取列属性中 Key=true 那一列的值，一般设置 ID 那列的 key=true.

清空界面选中： resetSelection， 选中的清除.

选择某行调用 setSelection 方法： 反选，  $('#'+ gridId).setSelection( rowId );

让某一行处于选中状态, id为行 id。

$('#' + gridId) .find(" input [ id = 'xxx  " + " xxxx " + rowIds[i] + "']") .attr ( "checked" , true );

这种选中并不是选中了行，而是使行的 checkbox 处于选中状态，没有触发 jqGrid 自带方法.

---

 jqGrid 数据重新加载

使用 Javascript 深度复制 重新载入数据可视化

thanks for reference :

https://www.cnblogs.com/jq-melody/p/4499333.html

---

button 样式及图标设置

checkbox format

---

jqGrid 隐藏行

setRowData 更新行 

setRowData( rowId, data, cssprop) 

rowId: 行id;  data : 格式 {name : value}  colModel 中名称.

cssprop : 如果是String 则会使用 addClass 方法将其加入到行 css 中，如果是 array 或者 对象, 则会直接加到 style 属性中.

---

jqGrid 隐藏某列, 显示某列

$(gridId).setGridParam().showCol("colname").trigger("reloadGrid");

$(gridId).setGridParam().hideCol("colname").trigger("reloadGrid");

不同表格为保证长度一致，placeHolder, 后台未传入数据也可.

 

---

jqGrid 设置 cell 背景色:

---

jqGrid 设置行背景色

该方法是在 jqGrid  gridComplete : function() { //   func() }

获取相应行下的 td 更改 css

method 1 :  $('#' + rowData.xxxId).find("td").css( "background-color", "red")

method 2 :  $("#" + IDs[i] + " td") .css( "background-color",  "red")

---

 jquery UI icon color  是由其父元素设定

HTML5 <hr/>  可指定 width : 50% 

 

---

treeGrid

node 属性之一 isExpand

 

---

2021-01-22  

diaolog 在还未初始化或创建出来状态下，如果调用 $(# dialogId).dialog('xxxxx') 方法会报错.

 

初始化之后会获取到 dialog 结构.

其有一个position 属性 ['top','right‘] ,  或 ’center'

---

 jqGrid treeGrid 单击行， 双击 事件：

onSelectRow : function ( rowid, selected ) { }

---

jqGrid addRowData

addRowData( rowId, data, position, scrowid)   -> true : success,  false otherwise

1. 新插入的行的 rowid.

2. 该行的数据， 可以一次性插入多行数据.

3. 插入的数据位置，通常为 first, last, before, after  首尾前后

4. 当 position 为 before 或 after 时， 需要指定的参照 rowId.

$( gridId ).addRowData ( rowid,  colModel-name, "last" }  插入队尾，dataObject:; {name1: val1, name: val2 } colModel.

多行数据结构： [ {name1: val, name2: val2 ...} , { name1: val1, name2: val2...}.. ] 

---

2021-01-26

jqGrid 的 colModel 里 formate 可用 template 方式, 整洁，复用，便于维护。

---

2021-02-02

jqGrid 属性设置里的 sortname 和 sortorder 导致发送远程请求

---

2021-02-02

 

---

2021-03-29

jqGrid 滑动时冻结列：

 

 jqGrid 把数据行插入到指定位置：

 

---

2021-04-01 12:17:50

jqGrid Tree grid 动态数据构建

由原始数据 在 JS 代码内 构建 colModel， 以及相应的 tree data ( 后记，因需要冻结, 及多行表头，后采用普通 grid merge 方式）

 

---