学习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
  • 下载

U8学习疑问集

  • 2013-09-13 20:57
  • 76KB
  • 下载

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

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

学习RMI的一些疑问

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

systemtap学习笔记及疑问

1.如何在命令行传递给脚本参数? 在testsuit的例子里,eventcount.stp脚本给出了一种很好的方式: #!/usr/bin/stap global c probe %(...

iOS __weak学习碰到的疑问

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

JS与jQuery插件运用和EasyUI框架的学习干货(三)

1:引用的知识点 2:划分页面区域(五个区域的构造和混合构造) ...

Spark生态之Alluxio学习21--疑问:为什么master看不到D9,而work节点有D9部分数据?

更多代码请见:https://github.com/xubo245/SparkLearningSpark生态之Alluxio学习 版本:alluxio-1.3.0(tachyon),spark-1.5...

学习DVB知识的疑问与自我解答

----------------------------------------------------------------------------------------------------...

Spark生态之Alluxio学习20--疑问:为什么D7-D9到最后的count时间都是30s左右?

更多代码请见:https://github.com/xubo245/SparkLearningSpark生态之Alluxio学习 版本:alluxio-1.3.0(tachyon),spark-1.5...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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