jqGrid api 中文說明

来源:https://www.cnblogs.com/qiantao/archive/2019/07/16/11197858.html
-Advertisement-
Play Games

JQGrid是一個在jquery基礎上做的一個表格控制項,以ajax的方式和伺服器端通信。 JQGrid Demo 是一個線上的演示項目。在這裡,可以知道jqgrid可以做什麼事情。 下麵是轉自其他人blog的一個學習資料,與其說是學習資料,說成查詢幫助文檔更加合適。 jqGrid學習之 安裝 jqG ...


JQGrid是一個在jquery基礎上做的一個表格控制項,以ajax的方式和伺服器端通信。
JQGrid Demo 是一個線上的演示項目。在這裡,可以知道jqgrid可以做什麼事情。

下麵是轉自其他人blog的一個學習資料,與其說是學習資料,說成查詢幫助文檔更加合適。

jqGrid學習之 ------------- 安裝

jqGrid安裝很簡單,只需把相應的css、js文件加入到頁面中即可。 
按照官網文檔:

/myproject/css/ 
            ui.jqgrid.css 
            /ui-lightness/ 
                  /images/ 
                  jquery-ui-1.7.2.custom.css

 /myproject/js/ 
            /i18n/ 
                  grid.locale-bg.js 
                  list of all language files 
                  …. 
            Changes.txt 
            jquery-1.3.2.min.js 
            jquery.jqGrid.min.js

 

在頁面中寫法:

Java代碼 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  

<head>  

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

<title>My First Grid</title>  

   

<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.1.custom.css" />  

<link rel="stylesheet" type="text/css" media="screen" href="js/src/css/ui.jqgrid.css" />  

<link rel="stylesheet" type="text/css" media="screen" href="js/src/css/jquery.searchFilter.css" />  

<style>  

html, body {  

   margin: 0;  

    padding: 0;  

    font-size: 75%;  

}  

</style>  

   

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>  

<script src="js/src/grid.loader.js" type="text/javascript"></script>  

   

</head>  

<body>  

...  

</body>  

</html>  

需要說明的是,jquery-ui的字體大小與jqgrid字體大小不一致,故需要在頁面上在加上一段 
style來指定頁面上文字大小。


 

jqGrid皮膚

從3.5版本開始,jqGrid完全支持jquery UI的theme。我們可以從http://jqueryui.com/themeroller/下載我們所需要的theme。當然,你也可以編輯自己的theme。jqGrid 
也並不需要把所有的css文件都引入進來,只需導入核心css文件“ui.theme.css ” 以及“ui.core.css”即可,文件位於目錄development-bundle/themes下。

jqGrid原理

jqGrid是典型的B/S架構,伺服器端只是提供數據管理,客戶端只提供數據顯示。換句話說,jqGrid可以以一種更加簡單的方式來展現你資料庫的信息,而且也可以把客戶端數據傳回給伺服器端。 
對於jqGrid我們所關心的就是:必須有一段代碼把一些頁面信息保存到資料庫中,而且也能夠把響應信息返回給客戶端。jqGrid是用ajax來實現對請求與響應的處理。

jqGrid參數

名稱

類型

描述

預設值

可修改

url

string

獲取數據的地

 

 

datatype

string

從伺服器端返回的數據類型,預設xml。可選類型:xmllocaljsonjsonnpscriptxmlstringjsonstringclientside

 

 

mtype

string

ajax提交方式。POST或者GET,預設GET

 

 

colNames

Array

列顯示名稱,是一個數組對

 

 

colModel

Array

常用到的屬性:name 列顯示的名稱;index 傳到伺服器端用來排序用的列名稱;width 列寬度;align 對齊方式;sortable 是否可以排

 

 

pager

string

定義翻頁用的導航欄,必須是有效的html元素。翻頁工具欄可以放置在html頁面任意位

 

 

rowNum

int

grid上顯示記錄條數,這個參數是要被傳遞到後

 

 

rowList

array

一個下拉選擇框,用來改變顯示記錄數,當選擇時會覆蓋rowNum參數傳遞到後

 

 

sortname

string

預設的排序列。可以是列名稱或者是一個數字,這個參數會被提交到後

 

 

viewrecords

boolean

定義是否要顯示總記錄

 

 

caption

string

表格名

 

 

ajaxGridOptions[a1] 

object

ajax參數進行全局設置,可以覆蓋ajax

null

ajaxSelectOptions[a2] 

object

ajaxselect參數進行全局設

null

altclass

String

用來指定行顯示的css,可以編輯自己的css文件,只有當altRows設為 ture時起作

ui-priority-secondary

 

altRows

boolean

設置表格 zebra-striped 

 

 

autoencode

boolean

url進行編

false

autowidth

boolean

如果為ture時,則當表格在首次被創建時會根據父元素比例重新調整表格寬度。如果父元素寬度改變,為了使表格寬度能夠自動調整則需要實現函數:setGridWidth

false

cellLayout

integer

定義了單元格padding + border 寬度。通常不必修改此值。初始值

5

cellEdit

boolean

啟用或者禁用單元格編輯功

false

cellsubmit

String

定義了單元格內容保存位

‘remote’

cellurl

String

單元格提交的url

空值

datastr

String

xmlstring或者jsonstring

空值

deselectAfterSort

boolean

只有當datatypelocal時起作用。當排序時不選擇當前

true

direction

string

表格中文字的顯示方向,從左向右(ltr)或者從右向左(rtr

ltr

editurl

string

定義對form編輯時的url

空值

emptyrecords

string

當返回的數據行數為0時顯示的信息。只有當屬性 viewrecords 設置為ture時起作

 

ExpandColClick

boolean

當為true時,點擊展開行的文本時,treeGrid就能展開或者收縮,不僅僅是點擊圖

true

ExpandColumn

string

指定那列來展開tree grid,預設為第一列,只有在treeGridtrue時起作

空值

footerrow[a3] 

boolean

當為true時,會在翻頁欄之上增加一

false

forceFit

boolean

當為ture時,調整列寬度不會改變表格的寬度。當shrinkToFit false時,此屬性會被忽

false

gridstate

string

定義當前表格的狀態:'visible' or 'hidden'

visible

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...