文档章节

更改EasyUI的DataGrid的显示信息。使用formatter属性,将数据库中存储的gender为1 or 0修改为“男”or“女”。

_小豆豆
 _小豆豆
发布于 2017/07/11 19:18
字数 425
阅读 9
收藏 0

<!-- 使用table显示用户信息,分页显示,使用easyui的表格实现数据的异步查询,是异步访问数据库,并加载数据并显示 -->
        <!-- easyui表格的异步访问返回的数据结构是Map
  {
          total:总共多少条数据
          rows:[
                  {id:1,name:'张三',password:'123',gender:'1'},
                  {当前页面中一行对应的数据},
                  {},
                  {}
               ]
  }
 
  数据表格属性:url:访问的远程的数据地址
             fitColumns:自适应列宽
             singleSelect:是否是单选表格
             pagination:是否显示分页的工具栏,如果开启分页工具栏,则组件自动开启分页查询参数
                     page:查询第几页
                     rows:每页多少行
             rownumbers:是否在数据显示的最前端先是行号
             pageSize:每页查询多少行数据,受限于pageList,
             pageList:分页工具栏中,可选的每页的查询行数,【10,20,30,40,50】
             
   -->
        <!-- 定义表头直接决定数据的显示方式 -->
        <table id="userTable" class="easyui-datagrid"
            style="width: 500px; height: 400px;"
            data-options="
          url:'${pageContext.request.contextPath }/user/SelectAllUserInfo.do',
          fitColumns:true,
          singleSelect:false,
          method:'post',
          pagination:true,
          rownumbers:true,
          pageSize:5,
          pageList:[5,10,15,20]
          ">
            <thead>
                <tr>
                    <!-- 定义列属性时,可以使用列属性来约束数据内容,field:字段名称,服务器返回数据对象的属性名
                checkbox:是否显示为复选框,此属性约束的列有固定的宽度,且对于所有的filed有效
             -->
                    <th data-options="field:'id',checkbox:true"></th>
                    <th data-options="field:'username'">登录名</th>
                    <th data-options="field:'password'">密码</th>
                    <th data-options="field:'name'">真实姓名</th>
                    <th data-options="field:'gender'" formatter="format">性别</th>
                </tr>
            </thead>
        </table>

 

<script type="text/javascript">

      function format(value,row,index){
         if (value == 1) {
            return "男";
        } else {
            return "女";
        }
    }

</script>

 

 

© 著作权归作者所有

_小豆豆
粉丝 0
博文 9
码字总数 5500
作品 0
海淀
程序员
私信 提问
easyui1.4.2 formatter处理json内嵌数据undefined

问题描述: easyui升级到1.4.2后,原来使用的获取json嵌套数据的函数“formatter: function (value,row) { return row.business.region }”不好使了,datagrid初始化加载数据的时候,会报错提...

zqz0125
2015/07/03
0
2
Easyui的datagrid结合hibernate实现数据分页

最近在学习easyui的使用,在学到datagrid的时候遇到了一些问题,终于抽点时间整理了一下,分享出来,请各位前辈高手多多指教! 1、先来看看效果,二话不说,上图直观! 2、easyui的datagrid的...

岁月无痕
2013/04/17
0
3
用户界面框架jQuery EasyUI正式发布v1.4.4[附下载]

jQuery EasyUI致力于帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。jQuery EasyUI提供了基于当下流行的jQuery core和HTML5的控件,助您打造适合当今网络的应用程序。 免费下载:jQu...

Miss_Hello_World
2015/11/09
0
0
easyui 中的datagrid 请求action没有进入action方法?也不知道什么原因?

$(function(){ $('#test').datagrid({ title:'我的表格', iconCls:'icon-save', width:700, height:350, nowrap: true, autoRowHeight: false, striped: true, collapsible:true, url:'show......

我爱编程zc
2016/08/28
594
0
Easyui的datagrid结合hibernate实现数据分页

Easyui的datagrid结合hibernate实现数据分页 最近在学习easyui的使用,在学到datagrid的时候遇到了一些问题,终于抽点时间整理了一下,分享出来,请各位前辈高手多多指教! 1、先来看看效果,...

岁月无痕
2015/06/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

聊聊中国的通信行业:从“七国八制”到“中华”脊梁

本期文章和大家一起来聊一聊我曾经从事过的通信行业吧。最近各方面信息的泛滥,包括和华为的同学聊天,自己确实也感慨颇多。想想我自己本科主修通信工程,研究生再修信息与通信工程,从本科开...

CodeSheep
48分钟前
3
0
MDK:ARM M451M:exceed the range of code meory, continue to erase or not?

问题: 代码空间超限 几天前就遇到:exceed the range of code meory, continue to erase or not? 如下所示: 解决过程 开始以为中MDK软件的128KB限制,如是就不能生成HEX文件,应该链接时有提...

SamXIAO
55分钟前
1
1
OSChina 周六乱弹 —— 因违反《中华人民共和国治安管理处罚法》第四十四条之规定

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @xiaoshiyue :#今日歌曲推荐# 惊艳分享谷微的单曲《安守本份》(@网易云音乐) 《安守本份》- 谷微 手机党少年们想听歌,请使劲儿戳(这里) ...

小小编辑
今天
266
7
Angular 英雄编辑器

应用程序现在有了基本的标题。 接下来你要创建一个新的组件来显示英雄信息并且把这个组件放到应用程序的外壳里去。 创建英雄组件 使用 Angular CLI 创建一个名为 heroes 的新组件。 ng gener...

honeymoose
今天
8
0
Kernel DMA

为什么会有DMA(直接内存访问)?我们知道通常情况下,内存数据跟外设之间的通信是通过cpu来传递的。cpu运行io指令将数据从内存拷贝到外设的io端口,或者从外设的io端口拷贝到内存。由于外设...

yepanl
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部