JQuery EasyUI DataGrid 程式設計經驗
原創地址:http://xiaomao870311.blog.51cto.com/1458701/384400
最近,在專案中用到JQuery EasyUI DataGrid,雖然它封裝了表格的實現,為我們提供很多便利,但是在使用的過程中,還是會遇到一些困難和問題。目前,問題都已經解決,特分享我使用DataGrid開發的經驗。(PS:我用的是JSP和J2EE框架開發)。
1.資料的提取和顯示。
DataGrid是通過url屬性獲取資料的。例如:url:'ListInfo.action',這樣通過呼叫Action中的方法獲取資料。返回的是JSON字串。注意,JSON字串必須按照DataGrid定義的資料格式進行拼裝。這種資料格式,可以參考我前面的文章中的附件。特別強調的是,JSON字串中的total域的值是資料的條數,用於資料的分頁。
2.資料的分頁。
資料的分頁分為前臺分頁和後臺分頁,前臺分頁,DataGrid已經封裝好了。DataGrid定義了兩個引數: rows(每頁的條數),page(當前的頁數),這兩個引數分別對應屬性pageSize,pageNumber。使用者可以在pageSize,pageNumber屬性中設定,也可以不設定,這樣就取預設值。我們只需在Action中定義兩個變數,private int rows; private int page; 接著通過SQL語句獲取需要取的值。分頁的SQL語句(Oracle)如下:
- select * from(
- select rownum r, field1,field2 from table_name where rownum <= page* rows(
- )
- where r > (page-1) * rows
這樣提取的資料的條數賦值給total域,拼裝在JSON字串中返回,就可以實現分頁了。當然,pagination:true,是當然需要的。
3.資料的操作。
資料的操作大致可分為:檢視,刪除。對於檢視,我們可以通過onClickRow或onDblClickRow事件實現。如:
$(function(){
$('#test').datagrid({
title:'資料列表',
width:900,
height:500,
.......(省略的屬性)
onDblClickRow: function() {
var selected = $('#test').datagrid('getSelected');
if (selected){
window.open("DataView.action?Id="+selected.ID);
}} 這樣雙擊就可以查看了。
關於刪除,可以通過點選刪除按鈕,呼叫刪除方法來實現。刪除按鈕可以在拼裝JSON字串的時候,賦值給OPERATION域,這樣設定{field:'OPERATION',title:'操作',width:120},就可以在頁面上顯示刪除按鈕了。刪除的實現,如下:
function DelAff(){
$.messager.confirm('確認','是否真的刪除?',function(r){
if (r){
var selected = $('#test').datagrid('getSelected');
if (selected){
var index = $('#test').datagrid('getRowIndex', selected);
$('#test').datagrid('deleteRow', index);
DeleteSubmit(selected);
}
}
});
}
function DeleteSubmit(selected)
{
var url="DataDelete.action?Id="+selected.ID;
$.post(
url
);
} 這樣頁面的刪除和資料庫中的刪除都實現了。
4.待解決的問題
如果返回的資料為空,則在IE瀏覽器下,頁面會有Bug。我的解決辦法是,把每個域設為"",這樣在頁面上就會出現一行空內容的資料。如果遇到這個問題並解決的朋友,可以給我建議。
相關推薦
JQuery EasyUI DataGrid 程式設計經驗
原創地址:http://xiaomao870311.blog.51cto.com/1458701/384400 最近,在專案中用到JQuery EasyUI DataGrid,雖然它封裝了表格的實現,為我們提供很多便利,但是在使用的過程中,還是會遇到一些困難和問題。目前,問題都已經解決,特分
動態控制jQuery easyui datagrid工具欄顯示隱藏
第一條 button 一個 按鈕 yui query 控制 show disable //隱藏第一個按鈕 $(‘div.datagrid-toolbar a‘).eq(0).hide(); //隱藏第一條分隔線 $(‘div.datagrid-toolbar div‘).e
jQuery EasyUI---DataGrid
ebo out xmlns tar utf select 基本 yui round <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DataGrid</t
jquery easyui datagrid 無滾動條,datagrid 沒垂直滾動條
p s load grid 技術 如果 fan 垂直滾動條 收藏 解決 jquery easyui datagrid 無滾動條,datagrid 沒垂直滾動條 ============================== 蕃薯耀 2018年2月6日 http://www
jquery easyui datagrid實現數據改動
art 圖片 statistic sta mod b2c tracking tex grid 1、單擊選中待改動行2、使用單獨對話框改動數據3、使用updateRow
jquery easyui datagrid/table 右邊線顯示不全
eight AI 分享 inf jquer alt 顯示 col info <table id="dg" style="height:400px"></table> 右邊線顯示不全 解決:在外面套一個panel,邊框隱藏:border:hidden
jquery-easyUi datagrid 基本用法
首先引入相應的css 和jq 指令碼 <link href="css/themes/default/easyui.css" rel="stylesheet" type="text/css" /> <link href="css/themes/icon.css"
jquery easyui datagrid columns日期格式化問題
使用easyui的datagrid,從後端返回的json字串中的日期,直接賦值到createtime這個column時,出現了錯誤顯示。 顯示的樣子是:[object Object]。明顯是一個物件,使用formatter做了格式化後, { &nbs
jquery easyui-datagrid 如何清空資料
//清空原有資料 方法1: var item = $('#filegrid').datagrid('getRows'); if (item) { for (var i = item.length - 1; i >= 0; i--
jQuery EasyUI Datagrid元件的完整的基礎DOM結構
標題可能有點長,什麼叫“完整的基礎DOM結構”,這裡“基礎”的意思是指這個結構不依賴具體資料,不依賴Datagrid的view屬性,只要存在Datagrid例項就會存在這樣的基礎DOM結構;而“完整”的意思是指在凍結列,凍結行,標題,footer,分頁這些功能塊都存在時候的DOM結構。
jQuery EasyUI Datagrid效能優化專題
文章目錄 1慢在哪些方面 2大資料量的載入 2.1原因分析 2.2解決方案一:返璞歸真 2.3解決方案二:使用scroll檢視 3勾選和點選
jQuery easyui dataGrid 動態改變排序欄位名,一般情況下,在使用的時候,我們會點選相應欄位進行排序,這裡以JAVA為例,後端的實體類欄位有可能和資料庫的欄位不一致; 如:實體類中的
jQuery easyui dataGrid 動態改變排序欄位名,一般情況下,在使用的時候,我們會點選相應欄位進行排序,這裡以JAVA為例,後端的實體類欄位有可能和資料庫的欄位不一致; 如:實體類中的屬性為userName,前臺filed="userName"而資料庫的欄位
JQuery easyUI datagrid 排序,使用sorter自定義排序
jQuery easyUI datagrid 排序的使用和例項 1.設定remoteSort(注:此屬性預設為true,如果如果是對本地資料排序必須設定為false) 2.設定列的sortable屬性 jquery easyUI datagrid 排序的例項 ? 1 2 3 4
專案總結—jQuery EasyUI- DataGrid使用
概要 jQuery EasyUI是一個基於jquery的集成了各種使用者介面的框架,使用easyui我們不需要寫太多javascript程式碼,一般情況下我們只需要使用一些html標記來定義使用者介面,easyui將我們需要的功能都已經封裝好了,我們只要來呼叫easyu
jquery easyui dataGrid動態改變排序欄位名
jquery easyui dataGrid 動態改變排序欄位名,一般情況下,在使用的時候,我們會點選相應欄位進行排序, 這裡以JAVA為例,後端的實體類欄位有可能和資料庫的欄位不一致; 如:實體類中的屬性為userName,前臺filed="userName"而資料庫的欄
jquery easyui datagrid使用,分頁、排序、查詢
天涯孤岸軟體商城,專業的個人網站,.net電子商務商城原始碼,,以及其它原始碼, 歡迎訪問:tyga.tygaweb.com (新) $('#dg').datagrid({ url: "xxx.ashx",
jquery easyui datagrid 遠端載入資料----javascript法
jquery easyui有三種辦法生成datagrid(資料網格),本篇專門討論javascript藉助jquey easy ui實現的方式 html部分 <main role="main" class="container"> <div
jquery easyui datagrid 遠端載入資料----把主鍵渲染為值遇到的問題及解決方案
起因:資料庫中一些欄位存的是代表具體值的數字,需要渲染為具體值 monggodb中的字典 mysql中存放的值為:expertin代表教練擅長的搏擊技能 jquery easyui中的相關程式碼如下:用於載入字典中的資料,注意:這一ajax請求必須設定為同步(async:false),
Jquery easyui datagrid清除快取使用技巧
在使用JQUERY EASYUI DATAGRID中避免快取資訊的解決方案 共有兩種解決方式 方式一: datagrid屬性method使用get方法,頁面使用Ajax不快取,但是datagrid中文引數提交後臺中文亂碼,需要轉碼; jQuery(function($)
jquery easyui datagrid請求兩次或多次的問題解決方法
var $grid = $("#elementYEAR_datagrid"); $grid.datagrid({ nowrap: false, //一行顯示資料,提高載入效能true striped: true, //隔行換色 collapsible:false,//是否