1.初次使用easyui，小說控件

        應爲要作一個統計系統，界面我不太懂，想找款簡單的ui框架。最好能搭上css和js，最終看到easyui、

        說來也怪，這偌大的一篇doc我也看不出啥東西，看demo也是雲裏霧裏。

        最後，反正就作了個簡單的界面。

        首先加入幾行引入庫。

<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>

        而後就可使用他自帶的一些空間了。

        先說說DateBox

  <input class="easyui-datebox"></input>

       這樣就好了，一個好看的

默認的日期選擇格式是mm-dd-yyyy，若是要像圖片同樣顯示，並且日曆使用中文的話，

只須要加入 本地化文件就ok了~

<script type="text/javascript" src="/sjsc/easyui/easyui-lang-zh_CN.js"></script>

這個文件在下載easyui目錄中自帶，有各國語言。

再來講說另一個組件

ComboGrid

combo就是下拉，grid就是表，因此就是一個下拉的表，能夠顯示一條記錄的多個內容，

只須要在頁面中加入

 <select class="easyui-combogrid" style="width:250px" data-options="
panelWidth: 500,
multiple: true,
idField: 'itemid',
textField: 'productname',
url: 'datagrid_data1.json',
method: 'get',
columns: [[
{field:'ck',checkbox:true},
{field:'itemid',title:'Item ID',width:80},
{field:'productname',title:'Product',width:120},
{field:'listprice',title:'List Price',width:80,align:'right'},
{field:'unitcost',title:'Unit Cost',width:80,align:'right'},
{field:'attr1',title:'Attribute',width:200},
{field:'status',title:'Status',width:60,align:'center'}
]],
fitColumns: true
">
</select>

其中columns：每一個field是顯示的字段。

method：http提交請求的方式。

url：加載的路徑，

idField: 選擇後的值是哪一個字段決定

textField：選擇後的顯示是哪一個字段決定

multiple：是否多選，若是多選直觀，可在字段中加入{field:'ck',checkbox:true}, 這樣效果更好，

好了，上個圖你們看看：

下面說說DataGrid

這就是個數據表格：

一樣，上代碼來着

 <table id='datashow' class="easyui-datagrid" title="數據查詢" style="width:927px;height:500px"
 data-options="singleSelect:true,collapsible:true,url:'',method:'get'">
 <thead>
 <tr>
 <th data-options="field:'ywjgdm',width:100">醫院名稱</th>
 <th data-options="field:'ghjl',width:100">門診掛號記錄</th>
 <th data-options="field:'listprice',width:100">門診就診記錄</th>
 <th data-options="field:'unitcost',width:100">門診用藥記錄</th>
 <th data-options="field:'attr1',width:100,align:'right'">門診收費記錄</th>
 </tr>
 </thead>
 </table>

哎喲，不當心暴露了，哈哈

是一個table，

其中singleSelect 表示是否單選

url：加載的路徑

method：請求的方式

collapsible：是否可摺疊，爲true則右上角有個按鈕，會最小化到一橫。

上圖。

hehe

你們以爲怎麼樣~

其中的屬性基本上在data-options中設置。

今天不早了，你們洗洗睡啦，木有妹紙好可憐。

建議你們上easyui官網看看界面demo，還有附帶的代碼。就是e文很差的話就夠嗆（- -！）——本人也是

基本上上面的控件加上文本框，按鈕，樹，菜單，tab&win，作個小東西就夠了吧~

下次有空，用到其餘的，或者上面控件的複雜功能再繼續補充，

下一節說一下控件的方法，獲取值等。

再見