大連首聞grid二次開發增強文檔

1. github直通車：zoGrid

2. 說明：

本插件基於大連首聞grid所做的二次開發，原生支持rest增刪改查，並支持配置型增刪改查。包括大量可定製可配置功能，開發的過程已經設想了非常多實際使用可能會遇到的場景，一一得到了適配，相信基本上已經可以滿足大部分使用需求了，當然會有考慮不周的地方，之後也將繼續在使用中對所有不足之處跟緊更新。在此感謝大連首聞grid做出的貢獻。

3. 表格截圖

自定義按鈕：
自定義工具：
編輯新增的表單驗證：
新增數據：
刪除行：
搜索：
排序：
導入excel：
導出excel：
編輯：

4. 二次開發內容說明

二次開發着重點在於ajax分頁加載數據功能的大量強化

刪除高級查詢，保留其它所有特性
改變工具欄刷新邏輯：
- 原版：只要執行過一次快速查詢，不管怎麼刷新呈現的數據都是快速查詢的內容，除非將快速查詢內容清空。
- 現版：刷新不帶快速查詢條件，得到表格載入時的原數據。
修改默認語言爲中文
修改排序邏輯：
- 原版：排序僅對當前頁的數據有效，非全局
- 現版：排序爲服務器全局排序
修正排序邏輯：原版在服務器獲取到數據時本地依然會按照規則進行一次排序，有些情況下反而會打亂原排序。直接刪除本地排序。
增加自定義工具欄
增加刪除、編輯兩顆默認可配置按鈕，增加自定義按鈕。
增加導入excel功能
大量修改與後端的交互邏輯：
- 原版：限制後端必須接收grid規定的數據類型才能完成查找導出等交互，也即後端必須適配前端。
- 現版：大量高自由度可配置的交互邏輯，原版具有的加載、查找、導出均支持配置，服務端返回的數據，分頁等格式默認並支持配置，也即前端可以適配後端。
補充增、刪、改三個邏輯。
原版支持restful(java - spring data rest)風格交互，默認操作邏輯具有一定程度的可適配性，儘可能的不需要邏輯配置。
支持複雜列加載模式，支持列數據懶加載

5. 詳細配置：

gridOption與原版不同的配置項:

loadURL : '',
curdURL : {
    retrieve : "/getUsers",
    update : "updateUsers/{id}",
    delete : "deleteUsers/{id}",
    create : "addUsers"
},
dataPath : "_embedded.users",
pagerPath : "page",
pagerDetailPath : {
    pagerRootPath : "page",
    page : "number",
    size : "size",
    totalElements : "totalElements",
    totalPages : "totalPages",
    firstPage : 0
},
tools : 'newData|refresh|fastQuery|export[excel,csv,pdf,txt]|importExcel',
customTools : [{
    icon: "fa fa-check",
    title: "自定義工具1圖標來自內置的fontawesome",
    callback: function(data){
        alert("當前頁數據集："+JSON.stringify(data));
    }
},{
    icon: "glyphicon glyphicon-plus",
    title: "自定義工具2圖標來自bootstrap"
}],
exportURL : '/export',
importURL : '/import',
importAction : "none",
fastQueryURL : "/users/search/default"

配置項詳細說明：

loadURL：優先級低於curdURL，設置loadURL主要用於rest風格，增刪改查將會自動根據此url進行配置，包括各自的請求路徑和請求方式(get、patch、post、delete)。當curdURL被配置時，此項無效。詳細：

 + 刪除：delete -> loadURL/資源id
 + 修改：patch -> loadURL/資源id
 + 查詢：get -> loadURL
 + 增加：post -> loadURL

curdURL：配置型增刪改查，需要配置增刪改查四個url，發送請求時，查刪爲get請求，改增爲post請求。路徑支持”{id}”的路徑匹配，{id}在解析時將會被置換爲資源id。詳細：

 + 刪除：get -> curdURL.delete?id=資源id。
 + 修改：post -> curdURL.update?id=資源id
 + 查詢：get -> curd.retrieve
 + 增加：post -> curdURL.create

dataPath：返回的數據詳細路徑，支持”.”分級，例如服務端返回的數據格式如下：

{
  "_embedded" : {
    "users" : [ ]
  },
  "_links" : {
    "self" : {
      "href" : "http://localhost/users/search/default?name=%E5%A4%A7%E8%A1%97%E4%B8%8A&sex=1&size=10&page=0"
    }
  },
  "page" : {
    "size" : 10,
    "totalElements" : 0,
    "totalPages" : 0,
    "number" : 0
  }
}

則需要設置dataPath爲"_embedded.users", 默認爲spring mvc的Page類返回形式："content"

pagerPath：分頁數據詳細路徑，支持"."分級，要求擁有size、totalElemnts、totalPages、number四個字段，並且number（當前頁）頁碼下標從0開始。如果字段不匹配則本配置會出錯，限制性較高。例如上述數據，pagerPath應當設置爲"page"。優先級低於自由度更高的pagerDetailPath。
pagerDetailPath：本項被配置，則pagerPath無效。可配置項如下

pagerRootPath : "page",    //相當於pagerPath，爲四個字段的所在路徑

//分別設置四個字段與所在路徑下的哪個字段匹配
page : "number",
size : "size",
totalElements : "totalElements",
totalPages : "totalPages",

firstPage : 0    //第一頁下標從0或是1開始

tools增加了newData（新增數據）和importExcel（導入excel）兩項。
- newData：映射gridColumn內的newData屬性，爲true則允許新增數據時設值。
- importExcel：導入excel，表格所作的邏輯僅爲傳輸選擇的excel到後端，至於拿取到excel做何邏輯處理則由開發人員自定。點擊效果：彈出文件選擇框，可多文件，xls、xlsx兩種格式限制，ajax形式傳輸name=files二進制數據至後端，爲了方便後端判斷導入動作，還會傳輸一個表單類型的數據action=”none”（可配置），可能用於後端設定統一導入入口，並根據action選擇導入動作的情景。後端需具備讀取文件表單字段混合上傳的能力。
customTools：自定義工具欄，爲一個json數組，每一項代表一個工具位，工具爲可配置項有

icon : "glyphicon glyphicon-plus", //支持grid依賴的fontawesome圖標，也支持bootstrap的內置圖標，直接添加類名即可。形式如上述配置。
title : "鼠標移動到工具位上顯示文字",
callback : function(data){
    //工具點擊回調處理函數，傳入當前頁顯示的數據集
}

exportURL：導出，支持的類型有excel、txt、pdf、csv，前端所實現的邏輯僅爲傳輸導出意圖到後端，其中包括：

//是否導出全部，爲false時，導出範圍參考page和size兩個字段
exportAllData:false
//導出的列及其順序
exportColumns:["name", "age", "sex", "birthday"]
//導出的文件名
exportFileName:"用戶列表"
//導出的文件類型
exportType:"excel"
page:0
size:10

importURL：導入excel的交互地址，詳細參看第六條
fastQueryURL：快速查詢的交互地址，前端將會發送get請求以及用戶的查詢條件到該地址，支持的查詢項映射gridColumn中的fastQuery=true，用戶空缺的查詢條件反應到地址上的條件值也將空缺，條件名不會空缺。例如：配置可查詢項name和address，表格將提供兩個項用於用戶的查詢，當用戶只填寫name時，地址爲fastQueryURL?name=填寫的值&address=&page=0&size=10，查詢時分頁操作依然有效。

gridColumn與原版不同的配置：

var sex = {1:"男",2:"女"};
var gridColumns = [
    {id:'name', title:'用戶姓名', type:'string',validate:'name', columnClass:'text-center',newData:true, fastQuery:true},
    {id:'password', title:'密碼', type:'string',validate:/^\d{6,16}$/, columnClass:'text-center',newData:true},
    {id:'confirmPassword',hide:"true", title:'確認密碼', type:'string',validate:/^\d{6,16}$/, equalWith:"password", columnClass:'text-center',newData:true},
    {id:'sex', title:'性別', type:'string',codeTable:sex, equalWith:"age", columnClass:'text-center',newData:true, fastQuery:true},
    {id:'birthday', title:'生日', type:'date',validate:"required",validateText:"生日信息必填", format:'yyyy-MM-dd hh:mm:ss',newData:true, columnClass:'text-center'},
    {id:'vip', title:'會員類型', loadConfig:{
        resourcePath:"vip",
        resourceFrom:"_links.vip.href",
        id:"_links.self.href",
        show:"vipName",
        resourceSetUrl:"/vips>_embedded>vips"
    }, codeTable:sex, validate:"identity", type:'string', columnClass:'text-center',newData:true, fastQuery:true},
    {type:"controll",columnClass:'text-center',edit_btn:true,del_btn:true,custom_btn:[{
    text : "通過",
    style_class : "btn btn-xs btn-success",
    icon: "fa fa-check",
    callback : function(record, i){
        alert("傳入當前行record和當前行所在當前頁數據集的索引");
    }
},{
    text : "拒絕",
    style_class : "btn btn-xs btn-primary"
}]}
];

配置項詳細說明：

validate ：用於編輯和新增時的表單驗證。newData沒有配置爲true時該字段不支持新增和編輯，也就談不上表單驗證。內置支持的表單驗證類型包括：

code：        //4-8位數字
name：        //中文2-4個
identity：    //嚴格的身份證號碼
tel：         //手機號碼
email：       //郵箱
password：    //6-16位密碼
required：    //非空

直接設置validate爲對應驗證類型字符串即可，例如：validate=”code”。同時支持自定義類型的正則，例如：validate=/^d{1,10}$/。驗證出錯時用戶會得到兩個反饋，出錯項邊框變紅，彈出驗證錯誤類型的對應提示信息。

validateText：既然驗證出錯有提示信息，那麼提示信息自然是可自定義的。
newData：該列是否支持新增和編輯。
equalWith：該列值必須與目標值驗證時必須一致。常用於密碼確認情景。編輯時將自動填充爲目標值。如果是密碼。
type支持更多類型：
- controll：此列爲按鈕組，不需要配置id。內部提供兩顆默認按鈕：edit_btn和del_btn，並默認綁定好修改、刪除的邏輯。可配置自定義的實現邏輯，對應的配置字段爲edit_function和del_function，將回調傳入當前行的record以及所在當前頁數據集的索引。
- password：此列在新增或者編輯時，輸入框類型爲密碼型。
custom_btn：自定義按鈕。爲一個數組json。詳細如下

custom_btn:[{
    text : "通過",  //按鈕顯示文本
    style_class : "btn btn-xs btn-success",  //按鈕樣式class，默認值
    icon: "fa fa-check",  //按鈕文本前圖標，默認爲"fa fa-check"
    callback : function(record, i){
        //按鈕點擊回調函數
        alert("傳入當前行record和當前行所在當前頁數據集的索引");
    }
},{
    text : "拒絕",
    style_class : "btn btn-xs btn-primary"
}]

loadConfig：列加載模式配置，提供五個配置項（除原表格的自定義解析外額外提供的第二種非直接加載方式）
- resourcePath：適用於該列所有信息已經包含在該行數據裏的場景，提供一個路徑定位到該資源，支持.分級。優先級高於resourceFrom。
- resourceFrom：適用於該列數據被歸爲一個鏈接放入該行數據的場景，將請求該鏈接獲取資源，配置的一個定位到該鏈接的路徑，支持.分級。
- id：當使用列懶加載模式時，該列的所有數據被指向一個地址，此時id用於指向該地址的路徑，當使用列急加載模式時，id用於指向該列數據的匹配key。在構建編輯、新增json時將會結合列的id屬性使用。急加載模式匹配key作爲option控件的value值，懶加載模式地址作爲option控件的value值。
- show：該列所要顯示的內容相對於資源的路徑。除了表格展示用於替換id顯示時，也將在新增、編輯時作爲option控件的其中一個select內容顯示。
- resourceSetUrl：資源集url，該鏈接在新增、編輯時將被加載用於構造一個option控件。鏈接後接 > 可逐級定位資源集實際路徑。更多策略反映在URL的自身能力上，例如實例配置中，
  resourceSetUrl:"/vips>_embedded>vips"
  實際資源請求鏈接爲”/vips”，資源集定位在返回json的”_embedded>vips”路徑下，如果需要分頁排序，則首先要求鏈接本身支持分頁排序，並在鏈接上體現：”/vips?size=100>_embedded>vips”。
  詳細舉例說明：

 "demoes" : [ {
      "id" : 4,
      "name" : "陳木鑫",
      "identity" : "441522xxxxxxxxxxx",
      "password" : "123",
      "expiredTime" : "2016-09-30 10:25:20",
      "_links" : {
        "self" : {
          "href" : "http://localhost/demoes/4"
        },
        "demo" : {
          "href" : "http://localhost/demoes/4"
        },
        "vip" : {
          "href" : "http://localhost/demoes/4/vip"
        }
      }
    }]

{
  "id" : 2,
  "vipName" : "普通會員",
  "vipPrice" : 2000.0,
  "_links" : {
    "self" : {
      "href" : "http://localhost/vips/2"
    },
    "vip" : {
      "href" : "http://localhost/vips/2"
    }
  }
}

 {
  "_embedded" : {
    "vips" : [ {
      "id" : 1,
      "vipName" : "超級會員",
      "vipPrice" : 5000.0,
      "_links" : {
        "self" : {
          "href" : "http://localhost/vips/1"
        },
        "vip" : {
          "href" : "http://localhost/vips/1"
        }
      }
    }, {
      "id" : 2,
      "vipName" : "普通會員",
      "vipPrice" : 2000.0,
      "_links" : {
        "self" : {
          "href" : "http://localhost/vips/2"
        },
        "vip" : {
          "href" : "http://localhost/vips/2"
        }
      }
    } ]
  },
  "_links" : {
    "self" : {
      "href" : "http://localhost/vips"
    },
    "profile" : {
      "href" : "http://localhost/profile/vips"
    }
  },
  "page" : {
    "size" : 1000,
    "totalElements" : 2,
    "totalPages" : 1,
    "number" : 0
  }
}

id:"vip",
loadConfig : {
        resourceSetUrl:"/vips?size=1000>_embedded>vips"
}

列本身的id原本用於數據集字段取值，但存在loadConfig時，它通常沒有直接的意義，但可以用於複雜加載模式時編輯新增的回傳：
例如以上demoes/4資源的vip爲vips/2，需要將其更改爲vips/1，那麼需要傳入服務端的數據，懶加載模式：

{
        id:4,
        vip:"http://localhost/vips/1"
}

急加載模式：

{
        id:4,
        vip:{
            id:1
        }
}

其中vip字段即取自列配置的id值，表格內部已經幫助實現了細節，在表格初始化編輯、新增頁面時，複雜加載列會被處理爲一個下拉選擇組件，每一項的值就是對應的地址或者匹配key的value，顯示內容就是所配置的loadConfig.show項。

blurooo 博客專家

發佈了25 篇原創文章 · 獲贊 25 · 訪問量 13萬+

私信關注

大連首聞grid二次開發增強文檔

1. github直通車：zoGrid

2. 說明：

3. 表格截圖

4. 二次開發內容說明

5. 詳細配置：

容器中nginx無法使用同一個網絡下的容器域名

Python: SunMoonTimeCalculator

「Pygors跨平臺GUI」1：Pygors跨平臺GUI應用研究

NETCore中實現一個輕量無負擔的極簡任務調度ScheduleTask

docker使用特定的網絡

使用c#強大的表達式樹實現對象的深克隆之解決循環引用的問題

「Pygors跨平臺GUI」2：安裝MinGW-w64、MSYS2還是WSL2

nodejs學習07——API

避免DbContext同時在多個線程調用

GPT-4o 引領人機交互新風向，向量數據庫賽道沸騰了

大連首聞grid二次開發增強文檔

spring mvc表單多文件混合異步上傳

HTML和CSS你可能不知道的技巧

收集可用的關於英語單詞api

JS-Grid插件使用中文解讀

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結