ligerUI 下拉框表格(多选)

学习笔记，转自：http://code.google.com/p/ligerui/

 

Demo：

 

 

Jsp代码  收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <%@ page language="java" isELIgnored="false" import="java.util.*" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6.     <title></title>  
  7.     <link href="jsFile/ligerUIV119/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />  
  8.     <style type="text/css"></style>  
  9.     <script src="jsFile/jQuery/jquery-1.8.3.min.js" type="text/javascript"></script>    
  10.     <script src="jsFile/ligerUIV119/js/core/base.js" type="text/javascript"></script>  
  11.     <script src="jsFile/ligerUIV119/js/plugins/ligerCheckBox.js" type="text/javascript"></script>  
  12.     <script src="jsFile/ligerUIV119/js/plugins/ligerResizable.js" type="text/javascript"></script>  
  13.     <script src="jsFile/ligerUIV119/js/plugins/ligerComboBox.js" type="text/javascript"></script>  
  14.     <script type="text/javascript">  
  15.         $(function ()  
  16.         {  
  17.             var dataGrid = [  
  18.                 { id: 1, name: '李三', sex: '男' },  
  19.                 { id: 2, name: '李四', sex: '女' },  
  20.                 { id: 3, name: '赵武', sex: '女' },  
  21.                 { id: 4, name: '陈留', sex: '女' }  
  22.                 ];  
  23.             var dataGridColumns = [  
  24.                 { header: 'ID', name: 'id', width: 20 },  
  25.                 { header: '名字', name: 'name' },  
  26.                 { header: '性别', name: 'sex' }  
  27.             ];  
  28.             $("#txtGrid").ligerComboBox({ data: dataGrid, textField: 'name', columns: dataGridColumns, selectBoxWidth: 200, selectBoxHeight:300,isMultiSelect: true  
  29.             });  
  30.         });   
  31.     </script>  
  32. </head>  
  33. <body style="padding:10px">   
  34.     <h3>表格</h3>     
  35.    <input type="text" id="txtGrid"/>  
  36.    <br />     
  37.  <div style="display:none;">  
  38.    
  39. </div>  
  40. </body>  
  41. </html>  

 

工程结构图如下：


posted @ 2013-05-31 13:25  赵雪丹  阅读(779)  评论(0)  编辑  收藏  举报