使用easyUI的datagrid写一个增删改查

使用easyUI的datagrid写一个增删改查

1 分页查询和datagrid的初始化

1. 1 页面布局:

<table id="dg" style="width: 500px;height: 400px;text-align: center">
</table>

<div id="tb">
    <a id="addBtn" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加学生</a>
    <a  id="removeBtn" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除学生</a>
    <a id="editBtn" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-cut'">修改学生</a>
</div>

1.2 页面初始化

// 使用js初始化表格
    $(function () {

        // datagrid 会默认取服务器请求数据
        // page = 1; 是  pageNumber
        // row =3  是   pageSize
        $("#dg").datagrid({

            url: "queryAll.do",  // 从服务器获取数据
            pagination: true,    // 显示分页的工具栏
            rownumbers: true,   // 列的行号
            pageNumber: 1,       //初始化的页码
            pageSize: 3,         //  页面的大小
            pageList: [3, 6, 9],    //  页面大小选项
            toolbar: '#tb', // 设置工具栏
            columns: [[
                // title  列的标题
                // field  列的字段名
                // width   宽度
                // url 设置了 从服务器获取数据, 通过 column 展示每一条的数据
                // 通过field 属性 从数据中获取对应的值
                //{"sid":5,"sName":"周芷若","sage":22,"ssex":"女","sphone":"222"}
                {field: 'aa',checkbox:true},
                {field: 'sid', title: '学生编号', width: 80},
                {field: 'sName', title: '学生姓名', width: 80},
                {field: 'sage', title: '年龄', width: 80},
                {field: 'ssex', title: '性别', width: 80},
                {field: 'sphone', title: '电话', width: 80}
            ]]
        })
    });

2 添加

2.1 页面布局

<%-- 添加stu 的对话框--%>
<div id="addDialog" class="easyui-dialog" title="添加学生" style="width:500px;height:350px;"
     data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true">

    <form id="addStuForm" method="post">

        <div style="text-align: center;margin-top: 28px">
            <input name="sName" class="easyui-textbox" data-options="prompt:'输入姓名'" style="width:220px;">
        </div>

        <div style="text-align: center;margin-top: 28px">
            <input name="sage" class="easyui-textbox" data-options="prompt:'输入年龄'" style="width:220px;">
        </div>

        <div style="text-align: center;margin-top: 28px">
            <input name="ssex" class="easyui-textbox" data-options="prompt:'输入性别'" style="width:220px;">
        </div>


        <div style="text-align: center;margin-top: 28px">
            <input name="sphone" class="easyui-textbox" data-options="prompt:'输入手机'" style="width:220px;">
        </div>
        <div style="text-align: center;margin-top: 28px">
            <a id="addStuBtn" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">添加学生</a>
        </div>

    </form>

</div>

2.2 页面代码实现

  // 添加的功能
    $(function () {

        //按钮给点击事件
        $("#addBtn").click(function () {
            // 01 点击 给一个对话框
            $("#addDialog").dialog('open');
            // 02 对话框编辑数据
        })

        // 提交按钮 添加点击事件
        $("#addStuBtn").click(function () {
            // 03 提交数据
            $("#addStuForm").form('submit',{
                url:'addStu.do',
                success:function (data) {
                    // 04 dg属性数据 / 对话框消失
                    // 返回的结果是字符串
                    console.log(data)
                    // {"msg":"添加成功","success":true}
                    // 01 把字符串转成json
                    var d = JSON.parse(data);
                    // 02 判断是否成功
                    if (d.success){
                        $.messager.alert("提示",d.msg,"info");
                        // 03  dialog 消失
                        $("#addDialog").dialog('close',false);
                        // 04  datagrid重新加载
                        $("#dg").datagrid("reload");

                    }else{
                        $.messager.alert("提示",d.msg,"info");
                    }
                }
            })
        });
    })

3 删除

3.1 页面代码实现

//删除
  $(function () {
        $("#removeBtn").click(function () {
            // 01 拿到选中删除的数据
            // 01 选中 要修改的学生
            var trs = $("#dg").datagrid("getChecked");
            if (trs.length == 1){
                // 02 ajax 发送删除的数据
                var id = trs[0].sid;
                $.post(
                    "delStu.do",
                    {id:id},
                    function (data) {
                        console.log(data);
                        $.messager.alert("提示",data.msg,"info");
                        // datagrid重新加载
                        $("#dg").datagrid("reload");
                    }
                    ,"json")
            } else if (trs.length == 0){
                $.messager.alert("提示","敢不敢选择一个学生修改","info");
            }else{
                $.messager.alert("提示","不能多选","info");
            }
        })
    })

4 修改

4.1 页面布局

<%--修改stu 的对话框--%>
<div id="editDialog" class="easyui-dialog" title="修改学生" style="width:500px;height:350px;"
     data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true">

    <form id="editStuForm" method="post">
        <input name="sid" type="hidden">
        <div style="text-align: center;margin-top: 28px">
            <input name="sName" class="easyui-textbox" data-options="prompt:'输入姓名'" style="width:220px;">
        </div>
        <div style="text-align: center;margin-top: 28px">
            <input name="sage" class="easyui-textbox" data-options="prompt:'输入年龄'" style="width:220px;">
        </div>

        <div style="text-align: center;margin-top: 28px">
            <input name="ssex" class="easyui-textbox" data-options="prompt:'输入性别'" style="width:220px;">
        </div>

        <div style="text-align: center;margin-top: 28px">
            <input name="sphone" class="easyui-textbox" data-options="prompt:'输入手机'" style="width:220px;">
        </div>
        <div style="text-align: center;margin-top: 28px">
            <a id="editStuBtn" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">修改学生</a>
        </div>

    </form>

</div>

4.2 页面代码实现

// 修改功能
    $(function () {
        //给修改点击 事件
        $("#editBtn").click(function () {
            // 01 选中 要修改的学生
            var trs = $("#dg").datagrid("getChecked");
            if (trs.length == 1){
                //修改
                // 02 dialog 编辑学生(数据回显)
                // 拿到选中学生的数据
               var tr = trs[0];
                console.log(tr)
                // load 填充表单 的数据
                // 回显不能忘了给id
                $("#editStuForm").form("load",tr);
                // dialog 展示数据
                $("#editDialog").dialog("open");
                // 03 提交数据
            } else if (trs.length == 0){
                $.messager.alert("提示","敢不敢选择一个学生修改","info");
            }else{
                $.messager.alert("提示","不能多选","info");
            }
        })

        // 编辑提交按钮 添加点击事件
        $("#editStuBtn").click(function () {

            // 03 提交数据
            $("#editStuForm").form('submit',{
                url:'updateStu.do',
                success:function (data) {
                    // 04 dg属性数据 / 对话框消失
                    // 返回的结果是字符串
                    console.log(data)
                    // {"msg":"添加成功","success":true}
                    // 01 把字符串转成json
                    var d = JSON.parse(data);
                    // 02 判断是否成功
                    if (d.success){

                        $.messager.alert("提示",d.msg,"info");
                        // 03  dialog 消失
                        $("#editDialog").dialog('close',false);
                        // 04  datagrid重新加载
                        $("#dg").datagrid("reload");

                    }else{
                        $.messager.alert("提示",d.msg,"info");
                    }
                }
            })
        });
    })

5 服务器代码实现

说明:服务器代码基于springmvc/mybatisplus实现

@RestController
public class StudentController {
    @Autowired
    private IStudentService studentService;

    @RequestMapping("queryAll.do")
    public PageResult<Student> pageList(int page,@RequestParam("rows") int row){

        // 01 添加分页的插件
        // 02  添加 分页的基本模型
        Page<Student> p = new Page<>(page,row);
        Page<Student> pData = studentService.page(p);

        // 返回的是  PageResult
        PageResult<Student> pageResult = new PageResult<>();
        // 把 page转成 pageResult
        pageResult.setTotal(pData.getTotal());
        pageResult.setRows(pData.getRecords());
        return pageResult;

    }


    @RequestMapping("addStu.do")
    public Result addStu(Student stu){

        // ar 模式添加
        // 如果业务简单 用ar 模式
        // 如果业务复杂  写service 层的逻辑
        boolean insert = stu.insert();
        return new Result(insert?"添加成功":"添加失败",insert);

    }

    @RequestMapping("updateStu.do")
    public Result updateStu(Student stu){
        // ar 模式添加
        // 如果业务简单 用ar 模式
        // 如果业务复杂  写service 层的逻辑
        boolean insert = stu.updateById();
        return new Result(insert?"修改成功":"修改失败",insert);

    }

    @RequestMapping("delStu.do")
    public Result delStu(int id){
        Student stu = new Student();
        stu.setSid(id);
        boolean b = stu.deleteById();
        return new Result(b?"删除成功":"删除失败",b);

    }
}

public class Result {
    // 信息
    private String msg;
    // 是否成功
    private boolean success;
}

/*
 * {"total":4,"rows":[
 *     {"name":"Name","value":"Bill Smith","group":"ID Settings","editor":"text"},
 *     {"name":"Address","value":"","group":"ID Settings","editor":"text"},
 *     {"name":"SSN","value":"123-456-7890","group":"ID Settings","editor":"text"},
 *     {"name":"Email","value":"bill@gmail.com","group":"Marketing Settings","editor"}
 * 		]
 *	}
 *
 *   封装 datagrid 需要的数据
 *   total  数据的总数
 *   rows   返回的数据
 *   {"name":"Name","value":"Bill Smith","group":"ID Settings","editor":"text"}, 
 *	  每一行展示的数据
 *    返回的数据要是json格式
 */
public class PageResult<T> {

    private Long total;
    private List<T> rows;
}