欢迎访问 如意编程网!

如意编程网

当前位置: 首页 > 编程资源 > 综合教程 >内容正文

综合教程

学习easyui疑问(三)

发布时间:2023/10/11 综合教程 18 老码农
如意编程网 收集整理的这篇文章主要介绍了 学习easyui疑问(三) 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

今天我学习easyui中碰到的还有一问题是:怎样创建一个表格?

首先,在easyui中文官网上提供的这样一种定义方式:

<!--table-->
<table id="tt"></table>
<!--script-->
$('#tt').datagrid({
url:'datagrid_data.json', /*这里用于传数据*/
columns:[[
{field:'code',title:'Code',width:100},
{field:'name',title:'Name',width:100},//须要特别注意这里没有所谓的单位
{field:'price',title:'Price',width:100,align:'right'}
]]
});

这样的方式仅仅能用于创建如图所看到的的datagrid(也就是我们所说的table):



而不能达到我所想要打有一定格式的excel表效果。效果图例如以下:



也就是说我想要自己定义表格格式。这在html中直接用table来写还是比較容易实现的,但为了table的样式美观性,用到easyui,我们就必须换种方式来写。

接下来,我就给大家介绍一下解决问题的方式—在table中进行创建

代码例如以下:

 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这里并无卵用-->
<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>

这样我们就既比較容易创建table格式。又能够应用easyui的ui界面了。

赞一个。!

望此文能帮助你!

分享万岁!!

总结

以上是如意编程网为你收集整理的学习easyui疑问(三)的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得如意编程网网站内容还不错,欢迎将如意编程网推荐给好友。