学习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右键设置疑问

  • 2016年01月21日 15:36
  • 1.18MB
  • 下载

Linux icmp 学习笔记 之三 icmp相关疑问分析

在上一节的分析中,曾留下3个疑问: 在分析icmp数据包处理流程之前,我有如下疑问: 1、为什么要为每一个cpu创建一个仅用于发送icmp报文的socket呢,不使用socket不也是可以把icm...

答读者问(25):一个大三学生有关专业学习的相关疑问及答复

最近,在CSDN博客上,我收到了一位大三学生发来的私信,内容如下:       周老师:        你好,我是浙大一名大三学生,是自动化转计算机的,只有一点C和C#基础,没动手写过什么正式的程序,...
  • zhouzxi
  • zhouzxi
  • 2015年03月19日 16:54
  • 1497

答读者问(23):一个研三学生有关工作之前的学习的疑问及答复

最近,我收到一位研三学生的邮件,内容如下:        周兆熊学长:        你好,之所以称呼你为学长,是因为我也是南邮的,通院的,今年研三,本科和硕士学的都是通信。从3月份就开始追随你的《让...
  • zhouzxi
  • zhouzxi
  • 2014年11月02日 09:57
  • 2038

U8学习疑问集

  • 2013年09月13日 20:57
  • 76KB
  • 下载

C++学习小疑问:类的名称能否和命名空间的名称相同?

对于类的名称能否和命名空间名称相同。我们可以看如下的实例: 定义命名空间和类名称相同: //name.h #pragma once namespace li { class li { public...

答读者问(29):三个在校学生有关在校学习、考研、编程语言、未来工作的疑问及答复

【来信1】 周学长: 您好,不好意思打扰了,我本科是重庆邮电大学的。学的是微电子,从CSDN上看到了,想麻烦请教几个问题。 昨天研招网上收到了大连海事的一个省实验室的复试通知,调剂的是计算机专硕...
  • zhouzxi
  • zhouzxi
  • 2015年06月11日 19:30
  • 1936

iOS __weak学习碰到的疑问

__weak弱引用并不持有对象,所以赋值给__weak修饰符的变量也不会改变计数器的值.    main.m id __strong obj3 = nil;     id _...

学习RMI的一些疑问

我目前有如下的一些疑问: 1. 为什么我的服务器端、客户端运行时,看不到***_stub类文件,不设定codebase也成功了? 我用本机和虚拟机做试验(本机为server、虚拟机为client)...

Android学习记录--ListView取id的疑问

今天修改了一个Listview程序,发现一个奇怪的问题 listview对数据库中的数据进行展示,listview获取每行的id竟然就是数据库中该行数据的_ID, 这个不知道是什么时候关联上去了 ...
  • aaajj
  • aaajj
  • 2015年06月14日 17:53
  • 399
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:学习easyui疑问(三)
举报原因:
原因补充:

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