【EasyUI篇】ComboGrid資料表格下拉框元件
阿新 • • 發佈：2018-12-12
微信公眾號： 關注可獲得更多幹貨哦！問題或建議，請公眾號留言;
------------------------------------------------
關注小編微信公眾號獲取更多資源
------------------------------------------------
31.ComboGrid資料表格下拉框元件
JSP檔案
<%-- Created by IntelliJ IDEA. User: ooyhao Date: 2018/7/29 0029 Time: 9:21 --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Tree</title> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css"> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/color.css"> <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/js/ComboGrid.js"></script> <style rel="stylesheet" type="text/css"> </style> <script> </script> </head> <body style="padding: 100px;"> <%--class 載入方式--%> <%--<select id="box" class="easyui-combogrid" name="dept" style="width:250px;" data-options=" panelWidth:500, value:'請選擇一個值', idField:'id', textField:'user', url:'http://localhost:8081/easyui/findUser.action', columns:[[ {field:'id',title:'id',width:120}, {field:'user',title:'帳號',width:120}, {field:'email',title:'郵箱',width:120}, {field:'date',title:'建立時間',width:150}, ]] "></select>--%> <input id="box" name="user" value="請選擇一個使用者"> </body> </html>
JS檔案
$(function () { $('#box').combogrid({ panelWidth : 600, idField : 'id', textField : 'user', url : 'http://localhost:8081/easyui/findUser.action', columns : [[ { field : 'id', title : '編號', width : 120, }, { field : 'user', title : '帳號', width : 120, }, { field : 'email', title : '郵箱', width : 120, }, { field : 'date', title : '建立時間', width : 120, }, ]] }); });
效果圖
------------------------------------------------
關注小編微信公眾號獲取更多資源
------------------------------------------------