利用easyui实现增删改查（一）：列表的展示

一写代码就开心

发布于 2020-11-19 15:22:43

9950

发布于 2020-11-19 15:22:43

文章被收录于专栏：java和python

就是将数据库一张表的数据以列表的形式展现在前段。那么就需要在后端将数据库数据查询出来，转化为json格式，返回给前段。

使用easyUI的好处是：只要后端传给前段json格式，那么前段就会自动的填充表格。用到的就是easyui的数据表格 datagrid

Easiui 只需要在前段我们将表头画出来就可以了。其他列表就是根据后端传到前段的数据自动的给你划分，具体这样实现。先在jsp页面画一个表头

我们在easyui的官网下载对应的js和css的文件。在我们的ssm项目里面进行导入

创建一个javaee项目

在这个项目里面将tomcat的依赖导入，导入之后就自动的导入jsp 和 service 的依赖

以下是这个ssm项目的目录

数据在jsp页面的展示

首先是展示成果

画出jsp页面

<%--列表按钮组--%>
<div id="datagridtoorbar">
    <a href="javascript:void(0)" >添加</a>
    <a href="javascript:void(0)" >删除</a>
</div>


<table id="datagridpersion">
    <thead>
    <tr>
data-options里面写的就是每一列的对应的属性，其中有这列的是哪个字段，宽度是多少
        <th data-options="field:'id',width:100,checkbox:true">ID</th>
        <th data-options="field:'name',width:100">姓名</th>
        <th data-options="field:'gender',width:100,formatter:person.fmt">性别</th>
        <th data-options="field:'age',width:100,sortable:true">年龄</th>
        <th data-options="field:'phone',width:100">手机号</th>
        <th data-options="field:'address',width:300">地址</th>
        <th data-options="field:'jyaq',width:300,formatter:person.caozuo">操作</th>
    </tr>
    </thead>
</table>

以上的代码只是简单的HTML的页面，还没有easyui的样式，我们需要在script标签里面给表格添加easyui的样式

    $("#datagridpersion").datagrid({
        title:"用户信息",
        iconCls:"icon-man",   图标
        height:500,
        width:1000,
 url:'/showPersion',  走这个项目里面的哪个controller层，返回是json字符串
        pagination:true   只要写这个属性，那么就有分页

    //    引用按钮组
        toolbar: '#datagridtoorbar',  自己写一个按钮组，用id的形式进行引用
        rownumbers:true, //显示行号
        checkOnSelect:false, //为false的时候，只有复选框被选中，才是真正的选中
        striped:true, //黑白相间
        }
    });

我们可以给A标签一个id，在script里面选中对应的标签，给easyui的样式还可以不给id，直接利用a标签里面的名字选中对应的标签

只要写了样式，就可以在页面看见这些都是easyui自动生成的，不需要你弄，你需要做的就是配置

后端操作

既然前端已经画好了，前端给给了路径了，就是url，那么一渲染这个jsp页面就会走对应的url，我们在后端就需要写这个对应url的接口了。

以下是后端的目录

首先是controller层前端的路径是先走这层

@Controller
public class PersonController {
    @Autowired
    private PersionService persionService;
    
    @ResponseBody
    @RequestMapping("/showPersion")
    public  Object  showPersion( int page,
                                 int rows){
        Object all02 = persionService.getAll02(page,rows);
        return all02;

    }
    }

之后是业务层service层

@Service
public class PersionServiceimpl implements PersionService {
    @Autowired
    private persionMapper persionMapper;
    @Override
    public Object getAll02(int page, int rows) {
        

        List<person> all01 = persionMapper.getAll01();

        return all01;
    }

接下来是mapper层

xml里面的查询全部数据的代码

  <select id="getAll01" resultType="com.pojo.person" >
        SELECT
        id,
        name ,
        age,
        gender,
        phone,
        address
        FROM persion
    </select>

以上的前端后端都弄完之后，那么启动项目，因为是ssm项目，所以需要配置tomcat服务器