1. 程式人生 > >前端框架(二)DIV多選複選框框的封裝和MySql資料庫存取

前端框架(二)DIV多選複選框框的封裝和MySql資料庫存取

         圖可以包含的寓意和含義是文字不能比擬的,先有一個效果圖你也就知道這篇文章的主要內容是關於什麼問題的,省去了一大堆文字的累述,看下面這張圖:

         

         這個需求就是要實現某個人具有另外一種特性,具有多對多關係,比如某個人既喜歡運動、有喜歡上網等等,這樣類似的需求在幾乎在每個系統裡面都有設計,而且很多框架都實現了這樣的功能,如果讓自己去實現就需要自己從建立表、邏輯、以及介面JS都需要自己手動去寫,下面是說下我的設計思路。

         設計思路

          將多個checkbox放到一個div元素中,利用jquery的函式進div和checkbox進行控制選取,取值和賦值可以寫一個迴圈既可以完成,至於表單提交既可以利用form標籤調教,也可以利用jquery的ajax方式提交,在對使用者體驗度要求高的系統中最好使用ajax方式提交,這是介面的設計部門,另外還有資料庫表的建立,我在做資料庫表時覺得很簡單但也遇到了一些問題。

          資料庫需要建立一張關係表來儲存多對多關係,大家都知道到,需要注意的是在這張關係表裡面怎麼儲存,即多個複選框的ID是儲存在一個欄位裡面還是一個ID一條記錄呢,這兩種方式都可以實現;如果儲存在一個欄位裡面就需要把處理這個欄位的邏輯寫在java類裡面,我在做表單時從表單介面直接到資料庫SQL語句,中間邏輯已經封裝不可以修改,因此只能把IDS存在一個欄位裡面,感覺這種方式實現也挺快,減少了邏輯。

         如下有兩張表fcs_checkitem、fcs_useritem,fcs_useritem為關係表它的itemids欄位儲存了fcs_checkitem表的itemid陣列,想利用下面巢狀語句查詢:

SELECT * FROM fcs_checkitem
WHERE itemid IN
(
	SELECT itemids FROM fcs_useritem
	WHERE userid='00000075'

)

          經測試這樣寫並不能查詢出結果,因為裡面巢狀的查詢返回的結果是一個逗號隔開的字串資料(001,002,,003),如果手動寫一個這樣的資料是可以查詢出來的,但是這樣動態的方式是查不出來的,上網查發現mysql是不支援這樣動態查詢的,發現有另一種思路實現這種關鍵字 “IN” 的功能。
SELECT group_concat(b.itemname) as itemnames 
FROM fcs_useritem a, fcs_checkitem b 
WHERE CONCAT(CONCAT(',',a.checkid),',') 
LIKE CONCAT(CONCAT('%,',b.itemid),',%') 
AND a.userid=':{$urlParam("formid")}:'

          上面利用了concat()以及group_concat()這兩個函式,它原理是可以用幾個字理解:用LIKE 實現IN的功能。

          這樣的例如有兩張表A和表B,A表的一個欄位ids是B表字段id的陣列,那麼給B.id兩天加上%,讓A.ids字元陣列兩端加上逗號,拿一個具體的數字舉個例子即是,1,去匹配,1,2,3,這個字串,只要找到一個匹配的就會返回一條記錄,用這種方式實現類似於in的查詢。


Concat()函式
這個函式常用語連線多個字串,例如

String Str1="世界";
String str2="你好"
Str3=concat(str1,str2);
Str3="世界你好",這個函式把這兩個字串連線了起來,有時會覺得很有用;

Group_concat()函式,看一下效果

           這是一個簡單的查詢結果,再看一下使用這個函式的效果


            該函式實現了將表中查出的某一列資料,轉換成一個字串陣列,如上圖所示,如果你就是想把查出的某一列轉為字串陣列會很有用。
            這個多選可以封裝為一個顆粒、把公共的東西抽象出來弄成一個個的顆粒,把它封裝為一個控制元件,這個控制元件有自己的函式獲得checkbox值和賦值等方法,還可以封裝一些樣式等,還在考慮怎麼才能把checkbox封裝到div標籤中,以後再用到時只需要引入這個div標籤即可,通過div標籤傳參控制多選,這涉及到自定義標籤怎麼弄,在.NET中可以開發使用者自定義控制元件,那麼在標籤中覺得也是可以開發自定義標籤庫,還有類似於下拉列表框等等,都可以封裝起來。

            不知道還有沒有別的思路可以實現使用者控制元件、或標籤的封裝?開發自定義標籤查了一下好實現,把開發jar包引入進來實現幾個介面就可以定義自己的標籤庫了,開發自定義標籤庫可以實現使用者自定義功能,方便頁面上的佈局,同時發現現在的很多產品有關介面框架,無論介面多美觀、高階大氣,都是封裝原始的html標籤元素,封裝也就意味著可以帶了自己心的特性,如果有特殊需求的時候可以自己適當封裝一下。

            方便別人程式設計、也提高了開發效率和編碼的靈活性。

相關推薦

前端框架DIV框框封裝MySql資料庫存取

         圖可以包含的寓意和含義是文字不能比擬的,先有一個效果圖你也就知道這篇文章的主要內容是關於什麼問題的,省去了一大堆文字的累述,看下面這張圖:                    這個需求就是要實現某個人具有另外一種特性,具有多對多關係,比如某個人既喜歡運

Hibernate框架之路一對關系

true pre conn 關系 編寫 none isp exce dia 在下列案例中:   客戶是一;聯系人是多;客戶可以擁有多個聯系人;一個聯系人只有一個客戶   1、編寫實體類 package com.pojo; import java.util

MVC框架----前端與後端MVC、MVVM等設計模式區別與聯絡

        上篇文章中提到了前端的框架分類,其中前端JS框架中有些是MVC設計模式,但是java和dotNET平臺也有自己的MVC也有自己的設計模式,這兩類有什麼區別呢,好多猿們甚是不解,旁徵博引

Struts2框架 Web.xml, Struts.xml, Action.Java 基本配置

str web.xml images ava img ima blog XML ges Struts2框架(二) Web.xml, Struts.xml, Action.Java 基本配置

javascript運動框架

rip asc oat 對象 obj func 我想 lac 我們 緊接著上面寫的... 給div加一個邊框,border:1px solid black window.onload = function(){ var div = document.getEle

教你寫Http框架——三個樣例帶你深入理解AsyncTask

func implement oncreate 其它 層疊 worker dcl 例如 人員 這個標題大家不要奇怪,扯Http框架怎麽扯到AsyncTask去了,有兩個原因:首先是Http框架除了核心http理論外。其技術實現核心也是線程池 + 模板 +

Java基礎學習筆記十六 集合框架

first 哈希 cat etag 基於 col 容器 處的 新元素 List List接口的特點: 它是一個元素存取有序的集合。例如,存元素的順序是11、22、33。那麽集合中,元素的存儲就是按照11、22、33的順序完成的。 它是一個帶有索引的集合,通過索引就

很easy的js雙向綁定框架:控制器繼承

rst data 發出 sim 跟著 cti exec mar spa 初衷 上一篇已經實現了數據的雙向綁定,但model的控制範圍是整個文檔。在實際project中必需要有作用範圍,以便做ui模塊的拆分。 這一篇,我們希望實現像angularjs一

Android sensor 系統框架

port amp cap 錯誤 str 註釋 hardware war cas 連載上一篇http://www.cnblogs.com/hackfun/p/7327320.html (D) 如何加載訪問.so庫 在前一篇博客http://www.cnblogs.co

集合框架

成員 線程 aslist 建議 元素 nds 還得 編譯期 line List的子類(掌握) 1、List的子類特點 ArrayList: 底層數據結構是數組,查詢快,增刪慢 線程不安全,效率高 Vector: 底層數據結構是數組,查詢快,

spring框架

面向 int 動態代理 實現 訪問修飾符 spring pat 應用 tco Spring的bean管理(註解)   1、代碼裏面特殊標記,使用註解可以完成相應功能   2、註解寫法@註解名稱(屬性名稱=屬性值)   3、類,方法,屬性(註解使用) spring註解開

一個只有99行代碼的JS流程框架

經驗 itl 兩個 ron timeout 當前 str mmu second 歡迎大家關註騰訊雲技術社區-博客園官方主頁,我們將持續在博客園為大家推薦技術精品文章哦~ 張鎮圳,騰訊Web前端高級工程師,對內部系統前端建設有多年經驗,喜歡鉆研搗鼓各種前端組件和框架。 導

UEFI中EHCI驅動的實現框架

urb link cnblogs 異步傳輸 tro insert 傳輸 frame struct 本文從數據結構的角度看一下EHCI的初始化: 下圖是EHCI驅動中涉及的主要數據結構的關系圖: 1.Struct USB2_HC_DEV是Host controller的核心

利用 Composer 完善自己的 PHP 框架

pass 簡易 cte 郵件接收 ces api cep home ase 回顧 上一篇文章中,我們手工建造了一個簡易的視圖加載器,順便引入了錯誤處理包,讓我們的 MFFC 框架在 M、V、C 三個方面都達到了“好用”的水平。View 是一個可插拔組件,在本篇文章中我們要創

徒手擼出一個類Flask微框架路由及路由註冊的演變

pass nac 等價 themes 字典 lac found round wap 路由的基本概念:根據不同的訪問路徑調用不同的方法或者類from webob import Response,Request,dec from wsgiref.simple_server im

Java源碼解析——集合框架——ArrayBlockingQueue

not 結構 AS ray false 元素 模式 -- ins ArrayBlockingQueue源碼解析 ArrayBlockingQueue是一個阻塞式的隊列,繼承自AbstractBlockingQueue,間接的實現了Queue接口和Collection接口

Windows環境下,從零開始搭建Nodejs+Express+Ejs框架---安裝Express,ejs

所有 nod 環境 安裝目錄 關於 str 列表 ima 執行 安裝Express,ejs的前提是一定要先安裝nodejs,具體安裝方法請查看 http://www.cnblogs.com/tfiremeteor/p/8973105.html 安裝Express和ejs的前

JavaWeb學習之Hibernate框架

utils xtend auto etl SQ dial begin 可選 oct hibernateAPI詳解 Configuration 創建 加載主配置 創建sessionFactory

分布式服務框架

無限 快速 異常 net iyu 成熟 基礎上 管理平臺 感知 一、分布式服務框架其他組成   上一節《分布式服務框架(一)》講述了RPC發展到SOA的過程,常見的SOA服務治理方案,以及分布式系統中常見的專業名詞,這部分其實只是涉及到了一個分布式系統架構的輪廓,真正一個系

ATK-DataPortal 設計框架

開源中國 mes -- 上下 urn 通用 mar ESS rate 在信息的交換過程中,總是有此相同相似的功能,由於業務的各自不同,由同一類型來處理諸如增刪改查等常見的信息處理方式。從日常的對些類行為操作為生成的類分析,大量雷同的代碼遍布整個項目。框架中xxxHandel