前端介面的核取方塊的動態生成

基於框架layui的實現的。

前端多選框的實現，需要後台查到資料，返回給前端形成渲染。這是layui的前端模板。

name
="assignman"
id="assignman"
>
value="
">
請選擇option
>
select
>

實現原理：使用js。獲取後端傳過來的資料解析然後拼接下拉選擇框。

$.
get(ctx +
"/user/queryallsales"
,function
(data)
else
//新增到下拉框中
am.(str);}
}// 重新渲染下拉框內容
layui.form.
render
("select");
});

注意這裡map是有講究的，如果使用的好，可以節省很多配置。因為當使用者選擇某個選擇時，他的返回值是value值。並不是資料型別。所以可以減少多表查詢匹配的問題。直接用value新增資料，或修改資料。

controller層

/**
* 獲取所有的銷售人員的資訊
* @return
*/@responsebody
("queryallsales"
)public list
>
queryallsales()

list> 這就可以使用列的別名從而實現前端需要的鍵值對形式，傳送到前端。這樣就可以減少類載體bean的新建了。

注意別名需要與前端的取值相同，這樣前端才能獲取到值。

select u.id,u.user_name assignmanname from t_user u left join t_user_role ur onu.id = ur.user_id left join t_role r onur.role_id = r.id where r.role_name = '銷售' and r.is_valid = 1 and u.is_valid = 1

class
="magb15  layui-col-xs12"
>
class
="layui-form-label"
>
⻆⾊label
>
class
="layui-input-block"
>
name
="roleids"
xm-select
="selectid"
>
select
>
div>
div>

動態js：

formselects.
config
('selectid',,
true
);

這裡layui對這些方法進行了封裝加工，所以我們返回的資料需要滿足他的格式。

對資料有介紹：

其中的樣板：

,,
,,]}

所以我們要傳送的資料就應該是：

,,

「selected」:「selected」是指選中的意思。

controller層

由於資料型別並不多，可以直接用list>發出資料，但是要注意別名與所需要的資料對應。

列名就是key值。

/**
* 獲取所有的角色資訊
* @return
*/@responsebody
("queryallroles"
)public list
>
queryallroles()

dao層


"queryallroles"
resulttype
="map"
parametertype
="int"
>
select
r.role_name rolename,
r.id id,
case when ifnull(temp.id,0) = 0 then ""
else "selected" end
as "selected"
from
t_role r
left join (
select
r1.role_name,r1.id
from
t_user_role ur
left join
t_role r1
onur.role_id = r1.id
where
ur.user_id = #
) temp
ontemp.id = r.id
select
>

或者


"queryallroles"
resulttype
="map"
parametertype
="int"
>
select
r.role_name rolename,
r.id id,
selected 
from
t_role r
left join ( 
select "selected" ,r1.id id
from t_user_role ur 
left join t_role r1 
on ur.role_id = r1.id 
where ur.user_id = # ) temp 
on temp.id = r.id
select
>

由於前端所用資料較少，就可以直接用list>傳播資料，但一定要注意列名，要與key對應上，大多情況是通過取別名對上資料。

核取方塊批量處理前端實現

在專案中，對業務的批量處理是乙個非常常見的方式，在具體的業務流暢，一般是以核取方塊多選進入批量處理的頁面下面就以乙個具體例項作為講解先從前端開始這是列表的標題，一般這裡的核取方塊主要是用來全選或者全不選具體功能實現參考下面來看內容的上面的運用了迭代器，拿到的form是examplef...

JQuery實現動態載入核取方塊

效果如圖，通過ajax接收的資料，動態生成想要的日期在網上查詢一番後，參考別人的記錄下來，方便以後查閱 function show showtime form clear instrumentnameshow textbox setvalue row.id textbox settext row...

對HTML動態核取方塊賦值

怎樣寫動態核取方塊參考我的部落格在編輯頁面要求我們對動態核取方塊賦初始值，這個時候需要轉變思路，將動態框的渲染和預設賦值寫在一起，節省了很多麻煩。首先還是在html頁面中留出核取方塊的位置交通控制方式在js中渲染 var type result.data.signaltype 獲取比對值 va...

前端介面的核取方塊的動態生成

核取方塊批量處理前端實現

JQuery實現動態載入核取方塊

對HTML動態核取方塊賦值

相關推薦