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

<!-- 使用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>

 

 

转载于:https://my.oschina.net/u/3488468/blog/1335240