easyui之 datagrid editor的使用

最新推荐文章于 2022-10-12 11:23:05 发布

天水一欢

最新推荐文章于 2022-10-12 11:23:05 发布

阅读量1.6w

点赞数 3

分类专栏： web前端

本文链接：https://blog.csdn.net/qq_40263927/article/details/89739201

版权

web前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

在项目中有的时候要利用datagrid进行展示记录结果，同时还要对记录进行修改，保存，这个时候就要用到editor.easyui api中讲的不是很详细，今天给大家展示下datagrid的搜索功能以及editor的使用。以下是效果图:

前端代码如下：

重点是要用 $('#result_grid').datagrid("endEdit", index);来触发 onAfterEdit 事件。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script src="../js/easyui-1.5.1/jquery.min.js"></script>
       <script src="../js/easyui-1.5.1/jquery.easyui.min.js"></script>
       <script src="../js/easyui-1.5.1/locale/easyui-lang-zh_CN.js"></script>
       <link href="../js/easyui-1.5.1/themes/default/easyui.css" rel="stylesheet" />
       <link href="../js/easyui-1.5.1/themes/icon.css" rel="stylesheet" />

       <style>
           .criteria{
           margin-top: 10px;
           margin-bottom: 10px;
           }
           .criteria > span{
               display: inline-block;
               width: 20%;
           }

           .criteria label{
               margin: 0px 10px;
           }

           .criteria span a{
               margin: 0px 5px;
           }

       </style>
   </head>
   <body>
       <div id='grid-toolbar'>
           <div class="criteria">
               <span><label>名称:</label><input type="text" class="easyui-textbox" name="username" ></span>
               <span ><label>开始时间：</label><input type="text" class="easyui-datebox" name="startTime" id="startTime" data-options="editable:false"/></span>
               <span><label>结束时间：</label><input type="text" class="easyui-datebox" name="endTime" id="endTime" data-options="editable:false"/></span>
               <span>
                   <a type="btn-search" class="easyui-linkbutton btn-blue" iconCls="icon-search">查询</a>
                   <a type="btn-save" class="easyui-linkbutton btn-blue" iconCls="icon-save">全部保存</a>
               </span>
           </div>
       </div>
       <table id="result_grid"></table>
   </body>

   <script>
var editRow=null;
       $('#result_grid').datagrid({
           url:"http://localhost:8082/springmvc2/hello/queryPlayer.do",
           fitColumns:true,//宽度自适应
height: 280,
rownumbers:true,
nowrap:true,
pagination:true,
pageNumber:1,
pageSize:10,
pageList:[10,20,30],
   onClickRow: function (rowIndex, rowData) {

   $("#result_grid").datagrid('selectRow', rowIndex);
   $("#result_grid").datagrid('beginEdit', rowIndex);//设置可编辑状态

   },
   onBeforeEdit:function(index,row){
       editRow=row;
               row.editing = true;

           },
           onAfterEdit:function(index, row, changes){
               $('#result_grid').datagrid('updateRow',{
                   index: index,
                   row: {
                       occupation: parseInt(row.occupation),
                       cause: row.cause
                   }
               });

               datagridMgr.addRow(row);
               row.editing = false;

           },
           onCancelEdit:function(index,row){
               row.editing = false;

           },
       columns:[[

       {field: 'id', checkbox:true,width:60},
       {field:'name',title:'名字',width:150},
       {field:'age',title:'年龄',width:150},
       {field:'sex',title:'性别',width:150,formatter:function(value,row,index){
           var result='';
           switch(value){
               case 0:
               result='女';
               break;
           case 1:
           result='男';
           break;
           }
           return result;
       }},
       {field:'occupation',title:'职业(可编辑)',width:150,
       formatter:function(value,row,index){
           var result='';
           switch(parseInt(value)){
               case 1:
               result='教师';
               break;
           case 2:
           result='工程师';
           break;
           }
           return result;
       },
       editor : {
                   type : 'combobox',
                   options : {
                       editable:false,
                       valueField:'code',
                      textField:'text',
                      url:"http://localhost:8082/springmvc2/hello/occupation.do"

                   }
               }

       },
       {field:'cause',title:'参赛原因(可编辑)',width:150,
       editor : {
                   type : 'text'
               }

       },
       {field:'creatTime',title:'报名时间',width:150}

       ]],
       toolbar: '#grid-toolbar'
       });

       /**
       * 数据管理对象
       */
       var datagridMgr = {
           dataList:[],
           /**
           * 查询数据
           */
           queryData:function(){
               var name=$('input[name="username"]').val();
               var startTime=$('input[name="startTime"]').val();
               var endTime=$('input[name="endTime"]').val();

               $('#result_grid').datagrid('load',{
                   name: name,
                   startTime: startTime,
                   endTime:endTime
               });
           },
           addRow:function(row){
               this.dataList.push(row);
           },
           submitData:function(){
               var json=JSON.stringify(this.dataList);
               subimtJsonData(json);
           }
       }

       /**
       * 查询事件
       */
       $('a[type="btn-search"]').bind("click",function(){
           datagridMgr.queryData();
       });

       /**
       * 全部保存
       */
       $('a[type="btn-save"]').bind("click",function(){
           if(editRow){

               datagridMgr.dataList.length=0;
               var rows = $('#result_grid').datagrid("getSelections");
               for(var i=0;i<rows.length;i++){
               var index=$('#result_grid').datagrid('getRowIndex',rows[i]);
               $('#result_grid').datagrid("endEdit", index);
               }
               var data=$('#result_grid').datagrid('getData');
               $('#result_grid').datagrid('loadData',data);
               editRow=null;
               datagridMgr.submitData();

           }else{
               $.messager.alert('温馨提示','没有行需要保存');
           }
       });

       /**
       * 提交数据
       * @param {Object} json
       */
       function subimtJsonData(json){
           $.ajax({

type: "POST"
url:"http://localhost:8082/springmvc2/hello/savePesonInfos.do",

dataType: "json",

data: {data:json},

success: function (data) {
                       $.messager.alert('温馨提示',data.message);
}
});
       }



   </script>
</html>

后端代码：

@ResponseBody
   @RequestMapping("/savePesonInfos")
   public Response savePesonInfos(@RequestParam String data, HttpServletResponse resp,
           HttpServletRequest req) {
       resp.setHeader("Access-Control-Allow-Origin", "*");
       Response status=new Response(false,"保存成功");
       try{
           List<Map> list=JSONObject.parseArray(data, Map.class);
           gridDataService.updateThreadreturnList(list);
       }catch(Exception e){
           status.setMessage("数据保存失败");
       }
       return status;
   }

数据库代码：

<update id="updateThreadreturnList" parameterType="java.util.Map">
<foreach collection="list" item="item" index="index" separator=";">
update players set occupation=#{item.occupation},cause=#{item.cause} where id=#{item.id}
</foreach>
</update>