学习easyui疑问(三)

原创 2015年07月08日 17:18:12

今天我学习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疑问(二)

学习easyui时我们会发现有个属性叫data-options,对于此属性的解释官网上解释我并没有找到,经过查找资料得知,其实data-options这个属性就是实例化我们所要引用的组件,例如,我们创...
  • ztzi321
  • ztzi321
  • 2015年07月08日 15:34
  • 687

学习easyui疑问(一)

如果你跟我一样是初学easyui的话,当然前提你要对html、csss、javascript有一定的了解了,你会发现我们想使用easyui中的控件时,会发现class=“easyui-panel”等类...
  • ztzi321
  • ztzi321
  • 2015年07月08日 14:54
  • 640

easyUI入门的学习

easyui是一种基于jQuery的用户界面插件集合。easyui是个完美支持HTML5网页的完整框架。...
  • Luo_da
  • Luo_da
  • 2016年05月31日 00:26
  • 2294

【C++深度剖析教程14】经典问题解析三之关于赋值的疑问

今天我们来总结一下,之前所学C++中所遇到的一些经典的问题。 第一个疑问是: -什么时候需要重载赋值操作符 -编译器是否提供默认的赋值操作? 解答: *编译器为每个类默认重载了赋值操作...
  • qq_37375427
  • qq_37375427
  • 2018年01月22日 00:53
  • 297

EasyUI学习-如何使用jQuery EasyUI?

1、 使用步骤 ①  在项目的WebRoot目录下创建js文件夹,导入easy-ui的js包; ②  在HTML页面引入easy ui 的js文件; ③  编写相应的HTML代码与JS代码...
  • KnightKitt
  • KnightKitt
  • 2014年08月17日 15:38
  • 1038

easyui 学习总结

使用easyui中遇到的问题,在此进行记录和分享
  • wc250025
  • wc250025
  • 2016年03月01日 14:10
  • 774

学习 jquery easyui 的网站

官网:jQuery EasyUI - helps you build your web pages easily http://www.jeasyui.com/jQuery EasyUI 教程 | ...
  • lw_power
  • lw_power
  • 2015年12月27日 20:59
  • 1015

简单easyui layout三块布局

布局样式引入easyui+jquery+css代码
  • hshsobug
  • hshsobug
  • 2017年11月24日 14:28
  • 133

深入学习Jquery+EasyUI

目  录 1.... Accordion(可折叠标签)... 2 1.1          实例... 2 1.2          参数... 3 2.... DateBox(日期框)... 4 ...
  • u013519551
  • u013519551
  • 2016年10月10日 22:16
  • 1059

疑问三

#include #include main() {  int guess;  int magic;  int counter;  magic = rand();  printf("P...
  • shoupa1997
  • shoupa1997
  • 2016年11月10日 19:05
  • 34
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:学习easyui疑问(三)
举报原因:
原因补充:

(最多只允许输入30个字)