今天我學(xué)習(xí)easyui中碰到的還有一問(wèn)題是：怎樣創(chuàng)建一個(gè)表格？

首先，在easyui中文官網(wǎng)上提供的這樣一種定義方式：

<!--table-->

<table id="tt"></table>

<!--script-->

$('#tt').datagrid({

    url:'datagrid_data.json',  /*這里用于傳數(shù)據(jù)*/

    columns:[[

        {field:'code',title:'Code',width:100},

        {field:'name',title:'Name',width:100},//須要特別注意這里沒有所謂的單位

        {field:'price',title:'Price',width:100,align:'right'}

    ]]

});

這樣的方式僅僅能用于創(chuàng)建如圖所看到的的datagrid（也就是我們所說(shuō)的table）：



而不能達(dá)到我所想要打有一定格式的excel表效果。效果圖例如以下：



也就是說(shuō)我想要自己定義表格格式。這在html中直接用table來(lái)寫還是比較容易實(shí)現(xiàn)的，但為了table的樣式美觀性，用到easyui，我們就必須換種方式來(lái)寫。

接下來(lái)，我就給大家介紹一下解決問(wèn)題的方式—在table中進(jìn)行創(chuàng)建

代碼例如以下：

 1 <table class="easyui-datagrid" style="width:400px;height:250px"

 2         data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">

 3     <thead>

 4         <tr>

 5             <th data-options="field:'code',width:100">Code</th>

 6             <th data-options="field:'name',width:100">Name</th>

 7             <th data-options="field:'price',width:100,align:'right'">Price</th>

 8         </tr>

 9     </thead>

10 </table>  

效果圖例如以下：



貼一下我的table代碼：

 <table class="easyui-datagrid" style="width: 300px; height: 200px;" data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">

 <!--url這里并無(wú)卵用-->

                <thead>

                    <tr>

                        <th data-options="field:'code',width:100">

                            Code

                        </th>

                        <th data-options="field:'name',width:100">

                            Name

                        </th>

                        <th data-options="field:'price',width:100,align:'right'">

                            Price

                        </th>

                    </tr>

                </thead>

                <tfoot>

                </tfoot>

                <tbody>

                    <tr>

                        <td>

                            _code

                        </td>

                        <td>

                            _name

                        </td>

                        <td>

                            _price

                        </td>

                    </tr>

                </tbody>

            </table>

這樣我們就既比較容易創(chuàng)建table格式。又能夠應(yīng)用easyui的ui界面了。

贊一個(gè)。！

望此文能幫助你!

分享萬(wàn)歲??！