① 有沒有人做過 jquery easyui datagrid 的分頁啊!從資料庫讀取數據,然後分頁的!
datagrid 是需要一個類來支持的,這個類可以轉換成Json數據提供dategrid調用。
datagrid分頁的時候會將下一頁多少條到多少條以參數的形式傳到後台,然後通過存儲過程或者sql語句。根據開始條和結束條 把中間的數據取出來,然後在datagrid上顯示,是這個形式。
而不是想樓主理解的那樣,把所有的數據都取出來,然後分頁,那樣太多弊端,比如說大數據量操作。就會顯得不優勢了。
select t.* from (select rownum r ,* from 表名 t )where t.r >開始條 and t.r <結束
② 如何自己開發一個簡單的jquery 插件
現在網上關於js和jquery封裝的插件很多,我剛剛接觸前端的時候,就很敬佩那些自己寫插件的大牛們!因為是他們給網站開發更多的便利,很多網頁效果,網上很多現成的插件!那麼這些插件是如何寫的呢看首先是有扎實的js和jquery技術基礎,其次還有一些寫插件的方法和技巧。關於js和jquery的技術基礎,那是一個慢慢積累的過程。但是關於寫插件的一些注意和技巧,本文可以略微介紹一下,方便以後寫插件的時候用得到。
jquery插件開發模式
jquery插件一般有三種開發方式:
通過$.extend()來擴展jQuery
通過$.fn 向jQuery添加新的方法
通過$.widget()應用jQuery UI的部件工廠方式創建
第一種$.extend()相對簡單,一般很少能夠獨立開發復雜插件,第三種是一種高級的開發模式,本文也不做介紹。第二種則是一般插件開發用到的方式,本文著重講講第二種。
③ Web前端開發框架有哪些
目前常用的一些前端的框架如下:
1. Bootstrap
Boostrap絕對是目前最流行用得最廣泛的一款框架。它是一套優美,直觀並且給力的web設計工具包,可以用來開發跨瀏覽器兼容並且美觀大氣的頁面。它提供了很多流行的樣式簡潔的UI組件,柵格系統以及一些常用的JavaScript插件。
Bootstrap是用動態語言LESS寫的,主要包括四部分的內容:
腳手架——全局樣式,響應式的12列柵格布局系統。記住Bootstrap在默認情況下並不包括響應式布局的功能。因此,如果你的設計需要實現響應式布局,那麼你需要手動開啟這項功能。
基礎CSS——包括基礎的HTML頁面要素,比如表格(table),表單(form),按鈕(button),以及圖片(image),基礎CSS為這些要素提供了優雅,一致的多種樣式。
組件——收集了大量可以重用的組件,如下拉菜單(dropdowns),按鈕組(button groups),導航面板(navigation control)——包括:tabs,pills,lists標簽,麵包屑導航(breadcrumbs)以及頁碼(pagination),縮略圖(thumbnails),進度條(progress bars),媒體對象(media objects)等等。
JavaScript——包括一系列jQuery的插件,這些插件可以實現組件的動態頁面效果。插件主要包括模態窗口(modals),提示效果(tool tips),「泡芙」效果(popovers),滾動監控(scrollspy),旋轉木馬(carousel),輸入提示(typeahead),等等。
Bootstrap已經足夠強大,能夠實現各種形式的 Web 界面。為了更加方便地利用Bootstrap進行開發,很多工具和資源可以用來配合使用,下面列舉了其中的一部分工具和資源。
jQuery UI Bootstrap —— 對於jQuery和Bootstrap愛好者來說這是個非常好的資源,能夠把 Bootstrap的清爽界面組件引入到jQuery UI中。
jQuery Mobile Bootstrap Theme —— 和上面提到的jQuery UI主題類似,這是一個為jQuery mobile建立的主題。如果你想讓用Bootstrap開發的網站在手機端也可以優雅訪問,那麼這個資源對你來說很方便易用。
Fuel UX —— 它為Bootstrap添加了一些輕量的JavaScript控制項。Fuel UI 安裝,修改,更新以及優化都很簡單方便。
StyleBootstrap.info —— Bootstrap提供了自己的幾種界面風格,StyleBootstrap提供了更多的配色選項,並且你可以給每個組件都應用不同的配色。
BootSwatchr —— 利用這個工具你可以立刻查看主題修改後的效果。對於每一次變動的效果,這個應用都會生成一個唯一的URL方便你與他人分享,你也可以在任意時刻修改你的主題。
Bootswatch —— 提供大量免費的Bootstrap主題。
Bootsnipp —— 在線前端框架交互組件製作工具,是一個供給設計師和開發者的基於Bootstrap HTML/CSS/JavaScript 架構的免費元素。
LayoutIt —— 通過界面拖放生成器簡便快捷地創建基於Bootstrap的前端代碼。通過拖放動作將Bootstrap風格的組件加入到你的個人設計里並且可以方便地修改他們的屬性,簡單便捷。
2、flex
Apache基金會發布了Flex 4.8版本,這是Adobe將Flex捐獻給Apache基金會後發布的第一個版本
需要注意的是
2014年03月10日,Apache Flex技術社區發布了全新的Apache Flex 4.12.0版本,該版本是Apache Flex 4.11.0的升級版本,改進的功能包括:
◆支持最新版本的Flash Player
◆支持最新的AIR運行時
◆改進了內存佔用和性能
◆改善了針對移動平台的組件的樣式
◆支持iOS7系統
◆修復了超過80個漏洞[4]
2014年05月10日,Apache對4.12.0版本進行優化改進,發布了Flex 4.12.1,新版本加入對全新Flash Player及Air運行時的支持,改進對移動媒體查詢的支持,並修復20多個Bug。
3、extjs
ExtJS是一種主要用於創建前端用戶界面,是一個基本與後台技術無關的前端ajax框架。
功能豐富,無人能出其右。
無論是界面之美,還是功能之強,ext的表格控制項都高居榜首。
華麗的界面,靈活的功能,還有開發工具都是配套的,但有個最大的問題,用就得花錢!
4、easyui
easyui幫助你構建你的web應用更加容易。
它是一個基於jquery的插件,開發出來的一套輕量級的ui框架,非常小巧而且功能豐富。
但是她有一個最大的問題就是代碼只能找到以前的開源的版本,到了1.2以後的版本源代碼都是經過混淆的,如果遇到問題修改起來會非常麻煩!不過一個比較大的優勢是開源免費,並且界面做的還說的過去!
5、MiniUI
又一個基於jquery的框架,開發的界面功能都很豐富。
jQuery MiniUI – 快速開發WebUI。
它能縮短開發時間,減少代碼量,使開發者更專注於業務和服務端,輕松實現界面開發,帶來絕佳的用戶體驗。
使用MiniUI,開發者可以快速創建Ajax無刷新、B/S快速錄入數據、CRUD、Master-Detail、菜單工具欄、彈出面板、布局導航、數據驗證、分頁表格、樹、樹形表格等典型WEB應用系統界面。
界面做的挺不錯,功能也挺豐富,但是有兩個比較大的問題,一個是收費,一個是沒有源碼,說白了,不開源!基於這個開發如果想對功能做擴展就需要找他們的團隊進行升級!
6、jQuery UI
jQuery UI 是一套 jQuery 的頁面 UI 插件,包含很多種常用的頁面空間,例如 Tabs(如本站首頁右上角部分) 、拉簾效果(本站首頁左上角)、對話框、拖放效果、日期選擇、顏色選擇、數據排序、窗體大小調整等等非常多的內容。
功能非常全面,界面也挺漂亮的,可以整體使用,也可以分開使用其中的幾個模塊,免費開源!
7、DWZ
DWZ富客戶端框架(jQuery RIA framework), 是中國人自己開發的基於jQuery實現的Ajax RIA開源框架.
設計目標是簡單實用,快速開發,降低ajax開發成本。
歡迎大家提出建議,我們將在下一版本中進一步調整和完善功能.共同推進國內整體ajax開發水平。
畢竟是國產的,支持一下,而且源碼完全公開,可以選擇一下!不過性能怎麼樣不敢確定!
8、GWT
Google 網頁工具包——GWT 提供了一組基於Java語言的開發包,這個開發包的設計參考Java AWT包設計,類命名規則、介面設計、事件監聽等都和AWT非常類似。熟悉Java AWT的開發者不需要花費多大的力氣就能夠快速的理解GWT開發工具包,將更多地時間投入到GWT應用的開發過程中。
你不用去了解這樣那樣的javascript框架,通過java你就可以寫出功能豐富的界面,可以做單元測試,畢竟是google的產品,嚴重支持一下!
9、YUI
Yahoo! UI Library (YUI) 是一個開放源代碼的 JavaScript 函數庫,為了能建立一個高互動的網頁,它採用了AJAX, DHTML 和 DOM 等程式碼技術。它也包含了許多 CSS 資源。使用授權為 BSD許可證,基本上沒怎麼研究過!
YUI Compressor倒是挺出名的,這套UI庫不知道應用的情況怎麼樣!
10、Sencha
Sencha 是由 ExtJS、jQTouch 以及 Raphael 三個項目合並而成的一個新項目。
大公司的框架,並且是幾樣庫的強強聯合,值得推薦!
11、Dojo
在國內應用好像不是很廣,不過性能上應該沒問題。
Dojo是一個用javascript語言實現的開源DHTML工具包。
有多個基金會的支持,包括IBM和SUN,都是軟體界的泰斗,值得信賴!
12、ZK
ZK是 一套以 AJAX/XUL/Java 為基礎的網頁應用程式開發框架,用於豐富網頁應用程式的使用介面。最大的好處是,在設計AJAX網路應用程式時,輕松簡便的操作就像設計桌面程式一樣。 ZK包含了一個以AJAX為基礎、事件驅動(event-driven)、高互動性的引擎,同時還提供了多樣豐富、可重復使用的XUL與HTML組件,以 及以 XML 為基礎的使用介面設計語言 ZK User-interfaces Markup Language (ZUML)。
功能豐富,全面,文檔齊全,而且升級了很多次,非常值得推薦!
13、OperaMasks-UI
OperaMasks- UI是OperaMasks團隊 2011下半年打造的一款輕量級前端JS組件庫,旨在提供一款學習曲線低、定製性靈活、樣式統一,且多瀏覽器支持、覆蓋企業業務場景的前端 JavaScript UI組件庫。目前,該團隊已將這一產品以LGPL 開源協議開放給社區。
文檔豐富,功能齊全,而且很容易使用和開發!而且是國產的喲!
14、JavaFX
Sun 公司(已於2009年被Oracle公司收購)在2008年12月05日發布了JavaFX技術的正式版,它使您能利用 JavaFX 編程語言開發富互聯網應用程序(RIA)。JavaFX Script 編程語言(以下稱為JavaFX)是Sun微系統公司開發的一種declarative, statically typed(聲明性的、靜態類型)腳本語言。JavaFX技術有著良好的前景,包括可以直接調用Java API的能力。因為 JavaFX Script是靜態類型,它同樣具有結構化代碼、重用性和封裝性,如包、類、繼承和單獨編譯和發布單元,這些特性使得使用Java技術創建和管理大型程序 變為可能。
④ UIkit前端框架,分頁的一點小問題
你好,我也遇到了這問題,不過經過排查解決了。使用分頁需要注意以下地方是否遺漏。
需要載入以下必選項(CSS、JS),注意Jquery要在其他JS之前
<link rel="stylesheet" href="/content/uikit/css/uikit.min.css">
<link rel="stylesheet" href="/content/uikit/css/uikit.gradient.min.css">
<script src="/content/scripts/jquery-2.1.4.min.js"></script>
<script src="/content/uikit/js/uikit.min.js"></script>
2. 需要分頁的頁面需要引入分頁JS
<script src="/content/uikit/js/components/pagination.js"></script>
3.分頁地方加入以下代碼
<ul class="uk-pagination" data-uk-pagination="{items:1000, itemsOnPage:10, currentPage:50}">
4.可以加入測試的JS
<script>
$('[data-uk-pagination]').on('select.uk.pagination', function(e, pageIndex){
console.log('You have selected page: ' + (pageIndex+1));
});
</script>
以上是我實際測試可用的
⑤ 有適合大數據量的jQuery分頁插件嗎
分頁一般不在前端代碼里實現,數據交互也需要使用ajax才可以,所以還是用存儲過程或後台代碼吧
⑥ jquery如何實現一個表格的篩選,也就是按條件查找篩選
使用jquery的each()方法遍歷單元格,如果滿足條件則進行相應的操作
$(selector).each(function(index,element))
實例演示:在表格中按姓名查找記錄,找到則突出顯示,否則給出提示
創建Html元素
<divclass="box">
<span>實例演示:在表格中按姓名查找記錄</span><br>
<divclass="content">
姓名: <inputtype="text"name="name"> <inputtype="button"value="查找">
<table>
<tr><td>張三</td><td>175</td><td>140</td></tr>
<tr><td>李四</td><td>170</td><td>120</td></tr>
<tr><td>王五</td><td>185</td><td>160</td></tr>
</table>
</div>
</div>設置css樣式
div.box{width:300px;padding:20px;margin:20px;border:4pxdashed#ccc;}
div.box>span{color:#999;font-style:italic;}
div.content{width:250px;margin:10px0;padding:20px;border:2pxsolid#ff6666;}
input[type='text']{width:100px;padding:5px10px;margin:5px0;border:1pxsolid#ff9966;}
input[type='button']{height:30px;margin:10px;padding:5px10px;}
table{border-collapse:collapse;}
td{width:80px;height:30px;line-height:30px;text-align:center;border:1pxsolidgreen;}
.selected{font-weight:bold!important;background:#ff99cc!important;color:#fff;}編寫jquery代碼
$(function(){
$(":button").click(function(){
$("tabletr").removeClass('selected');//還原樣式
name=$("input[name='name']").val();//要查找的名字
flag=true;//表示未查到目標
$("tabletr").find("td:first").each(function(){
if($(this).html()==name){//如果找到了
$(this).parent("tr").addClass('selected');//為整行設置樣式
flag=false;//將未找到標記設為false
returnfalse;//提前終止循環
}
});
if(flag)//如果沒找到就給出提示
alert("查無此人");
});
});觀察效果
如果表中有相應記錄