学习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界面了。赞一个!!

望此文能帮助你!


分享万岁!!

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-13 14:16:11

学习easyui疑问(三)的相关文章

学习easyui疑问(二)

学习easyui时我们会发现有个属性叫data-options,对于此属性的解释官网上解释我并没有找到,经过查找资料得知,其实data-options这个属性就是实例化我们所要引用的组件,例如,我们创建一个折叠的框 代码如下: 实例化我相信大家都很清楚了,不清楚的我在这里打个比方:如我们要造一辆汽车,我们有了汽车的模子,这只是我们构造一辆汽车的前提,真正成为一辆汽车,我们还需要给这辆汽车发动机.方向盘.轮胎等这些就是我们data-options中需要实例的东西. 望此文能帮助你! 分享万岁!!

学习easyui疑问(一)

假设你跟我一样是初学easyui的话,当然前提你要对html.csss.javascript有一定的了解了,你会发现我们想使用easyui中的控件时,会发现class="easyui-panel"等相似的样式类,我们在所引用的css文件里是找不到的. 这是为什么呢?初始的时候也许你跟我一样,花了比較长的时间去找css文件里的样式类,但都是无功而返.当我打开easyui.min.js会惊喜的发现原来问题在于此: 对于接下来的如何如何,我相信作为一个跟我一样的刚開始学习的人就不是必需弄清楚

学习easyui疑惑(四)

这篇文章我将着重写一下关于我这两天做用到easyui做table所遇到的问题,对于easyui所提供的便捷式插件我觉得应该给予肯定,但是同时对于easyui在做table方面的不足在这里说明一下. 首先展示一下我这两天所做的一个table页,这个页面有点难看,但是基本的要求算是实现了,学了两天的jquery算是有个交代吧. 上图: 效果就是折叠式效果,每项中都是table表.为了方便大家学习,我决定将自己的代码附上,里面也没有涉密的东西,都是空的. 查看代码可到: 实例代码 实现过程我就不多说了

《CSS网站布局实录》学习笔记(三)

第三章 CSS网页布局与定位 3.1 div 几乎XHTML中的任何标签都可以用于浮动与定位,而div首当其冲.对于其他标签而言,往往有它自身存在的目的,而div元素存在的目的就是为了浮动与定位. 3.1.1 div是什么 div是XHTML中制定的.专门用于布局设计的容器对象.在传统表格式布局中,之所以能够进行页面的排版布局设计,完全依赖于表格对象table.如今,接触另一种布局方式--CSS布局.div正是这种布局方式的核心对象.仅从div的使用上说,做一个简单的布局只需要依赖两样东西:di

Android Window PhoneWindow Activity学习心得--第三弹

Android Window  PhoneWindow Activity学习心得--第三弹 前面 我们完成了从Activity到PhoneWindow的整体跨度 正如我们所知道的与Activity组件关联的一个应用程序窗口视图对象关联一个ViewRoot对象,而将 一个Activity组件的应用程序窗口视图对象与一个ViewRoot对象关联是通过该Activity组件所使用的 窗口管理器(WindowManager)来执行的. 在我们初始化DecorView完成之后,我们需要关联应用程序窗口视图

Linux学习之CentOS(三)----将Cent0S 7的网卡名称eno16777736改为eth0

Linux系统版本:CentOS_7(64位) 一.前言: 今天又从Centos 6.5装回了Centos 7,毕竟还是要顺应潮流嘛.安装完成之后,发现发现CentOS 7默认的网卡名称是eno16777736,如图所示: 像我这种有轻微强迫症的人看到这个名字总感觉不爽,于是偏要把eno16777736改成以前版本的eth0,那就开始吧. 二.修改CentOS 7的网卡名称: 输入如下命令,进入对应目录,编辑文件: vim /etc/sysconfig/grub 然后,往这个文件中添加“net.

《iOS应用逆向工程》学习笔记(三)iOS文件权限

一个组可以包含多个用户,一个用户可以属于多个组. iOS中的每个文件都有一个属主用户和属主组.每个文件都具有一系列的权限. 在iOS中用3bit表示文件的使用权,从高位到低位分别是r(read), w(write), x(execute)权限. 文件和用户的关系存在三种可能性:(1)此用户是属主用户:(2)此用户不是属主用户,但在属主组里:(3)此用户既不是属主用户,也不在属主组里. 例如: 111101101代表rwxr-xr-x,其8进制为755,它表示该文件的属主用户拥有r, w, x权限

Django学习笔记(三)—— 模型 model

疯狂的暑假学习之 Django学习笔记(三)-- 模型 model 参考:<The Django Book> 第5章 1.setting.py 配置 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.', # 用什么数据库管理系统 'NAME': '', # 数据库名称,如果用sqlite,要写完整路径 'USER': '', # 如果用sqlite,这个不用写 'PASSWORD': '', # 如果用sqlite,这个不用写

内部类学习笔记(三)匿名内部类

这篇不转载了,自己来写,因为匿名内部类是内部类系列里我认为最难理解的. A.继承式的匿名内部类. 引用转载代码: 结果输出了:Driving another car! Car引用变量不是引用Car对象,而是Car匿名子类的对象. 建立匿名内部类的关键点是重写父类的一个或多个方法.再强调一下,是重写父类的方法,而不是创建新的方法.因为用父类的引用不可能调用父类本身没有的方法!创建新的方法是多余的.简言之,参考多态. 这里可能大家看的比较迷糊,尤其是 Car car = new Car(){ pub