datagrid的简单应用：

datagrid是数据表格的意思，可以将我们后台返回来的数据进行一一放入表格中相应的地方。

datagrid的简单应用：

这里的有分页功能，等下一期出datagrid的分页查询。

首先，如果要应用datagrid 的话，有两种方式，一种是写在HTML中，另外一种是写在js中的，可以根据自己的需求，如果业务比较多的情况下，建议使用js的方式去写，name具体看一下如何使用吧。

首先，记得将easyui的包放到你的项目里面，并且引入以下五个文件：

<link rel="stylesheet" type="text/css" href="../easyUI/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../easyUI/themes/icon.css">
<script type="text/javascript" src="../easyUI/jquery.min.js"></script>
<script type="text/javascript" src="../easyUI/jquery.easyui.min.js"></script>
<script src="../easyUI/locale/easyui-lang-zh_CN.js"></script>

这里我就用js的方式去书写：

1.首先，定义一个table

<table id="userConfig"></table>

2.在js中书写

$(".userConfig").datagrid({

这里有些属性是默认开启的，我只是在这里介绍一下。

url: "http://localhost:8080/getAllStaff.action",
    title: "用户信息",
    iconCls: "icon_save",图标
    pagination: true,是否分页
    pageSize: 5, /*pageSize是pageList中的一个*/
    pageList: [5, 10, 20],
    fit: true, /*随着tabs的宽自适应*/
    fitColumns: true,列自适应
    singleSelect: true,/*只能选择一行*/
    nowrap: false, /*当你的一个td中的内容套多的时候，设置成false，会自动换行，不会隐藏了。*/
    border: false, /*部门管理下面的边框消失*/
    idField: "id", /*跨页删除，一个性可以删除多个*/
    columns: [[{
        title: "编号",
        field: 'id',对应实体类中的属性
        width: 100,
    }, {
        title: "员工姓名",
        field: 'name',
        width: 100,
    }, {
        title: "性别",
        field: 'sex',
        width: 100,
    }, {
        title: "出生日期",
        field: 'bornDate',
        width: 100,
    }, {
        title: "入职日期",
        field: 'comeDate',
        width: 100,
    }, {
        title: "所属部门",
        field: 'department',
        width: 100,
    }, {
        title: "文件下载",
        field: 'file',
        width: 100,
        formatter: btnDetailed,
    },{
        title:"编辑",
        field:'updates',
        width:100,
        formatter:function (value, row) {
            return "<a href='#' onclick='updateStaff("+row.id+")'>修改</a>";
        }
    }]]
})

function btnDetailed(value) {
    return "<a href=http://localhost:8080/staffFile/"+value+" download=''>下载</a>";
}

function updateStaff(id) {
    $(".staffId").val(id);
    $(".easyui-tabs").tabs("select","修改用户");
}

,})

后台：

如果有分页，就返回map ,没有分页返回list

@RequestMapping("getAllStaff")
public @ResponseBody Map getAllStaff(Integer page,Integer rows){
    List<Staff> list = null;
    list = staffService.getAllStaff(page,rows);//这里是要传后台取？-？条数据
    List<Staff> list1 = staffService.getAllStaff1();
    Map map = new HashMap();
    map.put("total",list1.size());数据的总长度
    map.put("rows",list);//比如说，前1-5条数据
    return map;
}

datagrid的简单应用：

相关推荐