（札记）EasyUI 增删改查基本实现

刺骨的言语ヽ痛彻心扉 2022-08-06 06:15 191阅读 0赞

实现的功能：

1、添加数据

2、编辑数据

3、删除数据

4、搜索数据

5、分页功能

6、行双击事件

7、鼠标右键菜单

8、复选框，批量删除

效果图：

![SouthEast][]

源码:

<%--
      Created by IntelliJ IDEA.
      User: TNT
      Date: 2014/12/15
      Time: 16:31
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <script type="text/javascript" src="./easyui1.4.1/jquery.min.js"></script>
      <script type="text/javascript" src="./easyui1.4.1/jquery.easyui.min.js"></script>
      <link rel="stylesheet" type="text/css" href="./easyui1.4.1/themes/default/easyui.css" />
      <link rel="stylesheet" type="text/css" href="./easyui1.4.1/themes/icon.css" />
      <script src="./easyui1.4.1/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
    
      <script type="text/javascript">
        $(function(){
          $('#win').dialog('close');
          //创建一个grid
          var datagrid = $('#datagrid').datagrid({
            url:"testCm!listTest.action",
            fit:true,//自动填充满
            border:false,//去除边框
            pagination:true,//分页栏
            pageSize:20,//默认选择项
            pageList:[10,20,50,100],//下拉框数值
            rownumbers:true,//是否显示行号
            fitColumns:false,//是否让浏览器自动控制列宽
            idField:'id',//多选时，通过row记录行号
            singleSelect:false,//是否单选
            selectOnCheck:true,
            checkOnSelect:true,
            toolbar:"#toolbar",//工具栏调用
            loadMsg:'正在加载数据..',
            //列模型
            columns:[[
              //{field:'row',checkbox:true},
              {field:'id',title:'ID',width:180,align:'center',checkbox:true},
              {field:'passtime',title:'Passtime',width:130,align:'center',sortable:true,
                formatter:function(value,rowData,rowIndex){
                  var Timestamp = new Date(value).toLocaleDateString();//将时间格式转换成本地格式
                  return Timestamp;
                }
              },
              {field:'cpys',title:'cpys',width:80,align:'center'},
              {field:'cphm',title:'cphm',width:80,align:'center'},
              {field:'csys',title:'csys',width:80,align:'center'},
              {field:'ckFlag',title:'ckFlag',width:80,align:'center',
                formatter:function(value){
                  if(value) return "<font color='green'>通过</font>";//格式化内容，true->通过，false->禁止，并配上颜色
                    else return "<font color='red'>禁止</font>";
                }}
            ]],
            //双击事件
            'onDblClickRow':function (Index, row){
              editUser();
            },
            // 鼠标右键
            'onRowContextMenu':function(e, index, row){
              e.preventDefault();//取消事件的默认行为
              var selected=$("#datagrid").datagrid('getRows'); //获取所有行集合对象
              selected[index].id; //index为当前右键行的索引，指向当前行对象
              $('#mn').menu('show', {//定位右键菜单打开的位置
                left:e.pageX,
                top:e.pageY
              });
            }
          });
        });
    
        //添加/编辑的标志位，用于选择提交的url
        var subflag;
        //添加数据
        var newUser = function(){
          subflag = true;
          $('#win').dialog('open').dialog('setTitle','新建数据');//打开dialog窗口
          $('#ff').form('clear');//清空form表单的数据
        };
        //编辑数据
        var editUser = function(){
          subflag = false;
          var row = $("#datagrid").datagrid("getChecked");//获取勾选的数据
          if (row.length == 1) {
            $("#win").dialog("open").dialog('setTitle','编辑数据');
            $("#ff").form("load", {
              //数据绑定
              "testCm.id":row[0].id,
              "testCm.cphm":row[0].cphm,
              "testCm.cpys":row[0].cpys,
              "testCm.csys":row[0].csys,
              "testCm.passtime":new Date(row[0].passtime).toLocaleDateString(),
              "testCm.ckFlag":row[0].ckFlag
            });
          }else{
            alert('请只勾选一条数据');
          }
        };
        //删除数据
        var destroyUser = function(){
          var row = $("#datagrid").datagrid("getChecked");
          if(row.length > 0){//判断是否勾选数据
            var ids = '';
            for(var i=0;i<row.length;i++){//组合勾选的id
              ids += row[i].id+',';
            };
            $('#ff').form('submit', {
              url:"testCm!deleteTest.action?testCm.id="+ids,
              onSubmit: function(){
              },
              success:function(data){
                var data = eval('(' + data + ')');
                if(data.success){
                  $.messager.show({title:"提示信息", msg:"删除成功",timeout:1200,showType:'slide'});
                  $('#datagrid').datagrid('load');
                }else{
                  $.messager.alert("提示信息", "删除失败");
                }
              }
            });
          }else{
            alert('请勾选需要删除的数据..');
          }
        };
        //搜索数据
        var searchUser = function(){
          var searchText = $('#searchValue').val();
          if(searchText == '请输入cphm关键字'){
            searchText = '';
          }
          $('#datagrid').datagrid("load",{
            'keyword' : searchText
          })
        };
        // 添加/编辑窗口中的确认按钮操作
        var saveUser = function(){
          //添加
          var url;
          if(subflag){
            url = "testCm!saveTest.action";
          }else{
            url = "testCm!updataTest.action";
          }
          $('#ff').form('submit', {
            url:url,
            onSubmit: function(){
            },
            success:function(data){
              var data = eval('(' + data + ')');
              if(data.success){
                $.messager.show({title:"提示信息", msg:"操作成功",timeout:1200,showType:'slide'});
                $("#win").dialog("close");
                $("#datagrid").datagrid("load");
              }else{
                $.messager.alert("提示信息", "操作失败");
              }
            }
          });
        };
        //添加/编辑窗口中的取消按钮操作
        var closeUser = function(){
          $('#win').dialog('close');
        };
      </script>
    </head>
    <body>
        <%--创建一个grid--%>
        <table id="datagrid"></table>
    
        <%--toolbar工具栏重新实现，easyui自带的工具栏只能添加按钮--%>
        <div id="toolbar">
          <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" οnclick="newUser()">New User</a>
          <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" οnclick="editUser()">Edit User</a>
          <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" οnclick="destroyUser()">Remove User</a>
          <label>搜索:</label>
          <input type="text" id="searchValue" style="width:120px;color: #dcdcdc;" value="请输入cphm关键字"
                 οnfοcus="if(value=='请输入cphm关键字') {value='';}this.style.color='#000';"
                 οnblur="if (value=='') {value='请输入cphm关键字';this.style.color='#999';}"
          />
          <a href="#" class="easyui-linkbutton" iconCls="icon-search" plain="true" οnclick="searchUser()">Search User</a>
        </div>
    
        <%--添加/编辑窗口，及里面的Form表单--%>
        <div id="win" class="easyui-dialog" style="width:330px;height:250px"
             data-options="iconCls:'icon-save',modal:true,buttons:[{
                text:'保存',
                handler:function(){saveUser();}
             },{
                text:'关闭',
                handler:function(){closeUser();}
             }]" >
    
          <form id="ff" method="post">
            <div style="padding:5px; display: none">
              <label style="width:80px;text-align:right;float:left;">id:</label>
              <input class="easyui-validatebox" name="testCm.id" style="width:120px;" data-options="required:true" />
            </div>
            <div style="padding:5px;">
              <label style="width:80px;text-align:right;float:left;">passtime:</label>
              <input class="easyui-datetimebox" name="testCm.passtime"  style="width:120px;" data-options="required:true" />
            </div>
            <div style="padding:5px;">
              <label style="width:80px;text-align:right;float:left;">cphm:</label>
              <input class="easyui-validatebox" name="testCm.cphm" style="width:120px;" data-options="required:true" />
            </div>
            <div style="padding:5px;">
              <label style="width:80px;text-align:right;float:left;">cpys:</label>
              <input class="easyui-validatebox" name="testCm.cpys" style="width:120px;" data-options="required:true" />
            </div>
            <div style="padding:5px;">
              <label style="width:80px;text-align:right;float:left;">csys:</label>
              <input class="easyui-validatebox" name="testCm.csys" style="width:120px;" data-options="required:true" />
            </div>
            <div style="padding:5px;">
              <label style="width:80px;text-align:right;float:left;">ckFlag:</label>
              <select class="easyui-combobox" name="testCm.ckFlag" style="width:120px;" data-options="required:true">
                <option>true</option>
                <option>false</option>
              </select>
            </div>
          </form>
        </div>
    
        <div id="mn" class="easyui-menu" style="width:120px;">
          <div onClick="newUser()" data-options="iconCls:'icon-add'">新增</div>
          <div onClick="editUser()" data-options="iconCls:'icon-edit'">编辑</div>
          <div onClick="destroyUser()" data-options="iconCls:'icon-remove'">删除</div>
          <div class="menu-sep"></div>
          <div onClick=$("#datagrid").datagrid("load"); data-options="iconCls:'icon-reload'">刷新</div>
        </div>
    </body>
    </html>

[SouthEast]: /images/20220806/309e28c8cbfe42fda306bf847a2fe90c.png