Easyui综合实例（表格编辑、添加删除行、下拉框关联、表头数据筛选）

weixin_41696089

于 2020-11-20 21:47:56 发布

阅读量402

点赞数

分类专栏：前台 Easyui 实例文章标签： easyui

本文链接：https://blog.csdn.net/weixin_41696089/article/details/109772882

版权

实例同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

前台

10 篇文章 0 订阅

订阅专栏

Easyui

1 篇文章 0 订阅

订阅专栏

1、页面实例

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml" xmlns:th = "http://www.thymeleaf.org">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>设备信息维护</title>
 <!-- 分离模式框架必需start -->
 <script type="text/javascript" charset="UTF-8" th:src="@{/js/language/cn.js}"></script>
 <script type="text/javascript" charset="UTF-8" th:src="@{/js/framework.js}"></script>
 <link rel="stylesheet"  type="text/css"  th:href="@{/css/import_basic.css}" />
 <link rel="stylesheet"  type="text/css" id="skin" prePath="@{/}" splitMode="true"  th:href="@{/skins/blue/style.css}" />
 <link rel="stylesheet"  type="text/css"  id="customSkin"  th:href="@{/system/layout/skin/style.css}"/>
 <link rel="stylesheet"  type="text/css"  th:href="@{/skin/style.css}" />
 <!-- 分离模式框架必需end -->
 <!--数据表格start-->
 <script type="text/javascript" th:src="@{/js/table/quiGrid-change.js}"></script>
 <!--数据表格end-->
 <!--引入弹窗组件start-->
 <script type="text/javascript" th:src="@{/js/popup/drag.js}"></script>
 <script type="text/javascript" th:src="@{/js/popup/dialog.js}"></script>
 <!--引入弹窗组件end-->

 <link rel="stylesheet" th:href="@{/Eui2/darkblue/css/base.css}" type="text/css">
 <link rel="stylesheet" th:href="@{/Eui2/darkblue/uimaker/easyui.css}" type="text/css">
 <link rel="stylesheet" th:href="@{/Eui2/darkblue/uimaker/icon.css}" type="text/css">
 <link rel="stylesheet" th:href="@{/Eui2/darkblue/css/providers1.css}" type="text/css">
 <link rel="stylesheet" th:href="@{/Eui2/darkblue/css/basic_info.css}" type="text/css">
 <link rel="stylesheet" th:href="@{/Eui2/darkblue/css/color.css}" type="text/css">
 <link th:href="@{/css/webuploader.css}" rel="stylesheet" type="text/css" />
 <script type="text/javascript" th:src="@{/Eui2/darkblue/jquery.min.js}"></script>
 <script type="text/javascript" th:src="@{/Eui2/darkblue/jquery.easyui.min.js}"></script>
 <script type="text/javascript" th:src="@{/Eui2/darkblue/easyui-lang-zh_CN.js}"></script>
 <script type="text/javascript" th:src="@{/Eui2/darkblue/datagrid-filter.js}"></script>
</head>
<body fit='true' class="easyui-layout">
	<div id="dataBasic">
	</div>
	<script type="text/javascript">
	  var basePath=[[@{/}]];
	  var unitid='[[${session.unitid}]]';
	  var oilfield='[[${session.oilfield}]]';
	  $(function() {
	   $('#dataBasic').datagrid({
	    width : '100%',
	    height : '100%',
	    pageSize:15,//设置分页初始化页面大小。
	    pageList : [15,30,50,100,150],//初始化页面大小选择列表。
	    nowrap : true,//同一行中显示数据,设置为true可以提高加载性能。
	    striped : true,//是否显示斑马线效果
	    pagination : true,//显示分页工具栏
	    rownumbers : true,//显示序号
	    remoteSort : false,//定义从服务器对数据进行排序。
	    onDblClickRow:onClickRow,//双击行触发行编辑功能
	    url :basePath + 'Security/Sbxx/Base_Page2?unitid=' + encodeURI(unitid) + "&oilfield=" + encodeURI(oilfield),
	    loadMsg : '数据装载中......',
	    onLoadError : function() {
	     alert('数据加载失败!');
	    },
	    columns : [
	            [
	              {title : '序号',field:'sb_id',align:'center',checkbox:true,rowspan:2},
	              {title: '设备类别', field: 'type', width: '10%', rowspan: 2, align: 'center',
	                 editor: {
	                  type: 'combobox',
	                  options:{
	                    valueField: 'value',
	                    textField: 'key',
	                    url:basePath+'Security/Sbxx/getOptions3?oilfield='+encodeURI(oilfield)+"&flag="+encodeURI("sblb")+"&param1=FJ20200525144000051832",
	                    onSelect: function(rec){
	                      var row = $('#dataBasic').datagrid('getSelected');//获取当前行(object)
	                      var rowindex = $('#dataBasic').datagrid('getRowIndex',row);//返回指定行的索引号(number)
	                      var thisTarget = $('#dataBasic').datagrid('getEditor',{index:rowindex,field :'type'}).target;//获取当前行选中的值
	                      var optionvalue = thisTarget.combobox('getValue');//获取该下拉框的value
	                      var Target = $('#dataBasic').datagrid('getEditor',{index:rowindex,field :'sbdlmc'}).target;//获取级联的下拉框
	                      Target.combobox('clear'); //清除原来的数据
	                      var url = basePath+'Security/Sbxx/getOptions3?oilfield='+encodeURI(oilfield)+"&flag="+encodeURI("sbdlmc")+"&param1="+encodeURI(optionvalue);
	                     Target.combobox('reload',url)
	                    }
	                  }
	                 }
	               },
	              {title : '设备大类名称', field : 'sbdlmc',width:'8%',rowspan:2,align:'center',
	               editor: {
	                 type: 'combobox',
	                 options:{valueField: 'value', textField: 'key'}
	                }
	              },
	              {title : '设备名称', field : 'sbmc', width:'10%', rowspan:2, align:'center', editor:'text'},
	              {title : '品牌', field : 'sbpp',width:'10%',rowspan:2,align:'center',editor:'text'},
	              {title : '规格型号', field : 'ggxhj',width:'10%',rowspan:2,align:'center',editor:'text'},
	              {title : '硒鼓/墨盒型号', field : '',width:'24%',colspan:4},
	              {title : '相关附件',  field:'xgfj',width:'14%',rowspan:2,align:'center',
	                formatter: function(value,row,index){
	                 var fj=''
	                 //附件查询
	                 $.ajax({
	                   url: basePath + "/Security/Sbxx/file_list?event_id="+row.sb_id+"&file_flag="+encodeURI("设备维护附件"),
	                   type:"post",
	                   async:false,
	                   success: function (data) {
	                     if(data.rows.length>0){
	                       $.each(data.rows, function (i, v) {
	                         fj+='<a style="cursor:pointer;color: #2222cc" onclick="file_view(\''+row.sb_id+'\')">'+v.file_name+'</a><br>'
	                       });
	                     }
	                   }
	                 });
	                 return fj;
	               }
	              },
	             {title : '操作',  field:'caozuo',width:'12%',rowspan:2,align:'center',
	               formatter: function(value,row,index){
	                 return '<input type="button" class="button" value="删除"  onclick="deleterow(this,\''+row.sb_id+'\')"/>&nbsp;'+
	                         '<input type="button" class="button" value="附件上传"  onclick="upload(this,\''+row.sb_id+'\')"/>';
	               }
	             }
	            ],
	            [
	             {field:'is_black',title:'黑色',width:'6%',align:'center',editor:'text'},
	             {field:'is_blue',title:'蓝色',width:'6%',align:'center',editor:'text'},
	             {field:'is_yellow',title:'黄色',width:'6%',align:'center',editor:'text'},
	             {field:'is_red',title:'红色',width:'6%',align:'center',editor:'text'}
	            ]
	    ],
	     toolbar: [{ text: '添加', iconCls: 'icon-add', handler: function () {//添加列表的操作按钮添加，修改，删除等
	       append();
	      }
	     }, '-',
	     { text: '取消编辑', iconCls: 'icon-clear', handler: function () {
	       $('#dataBasic').datagrid("endEdit", editIndex);
	      }
	     }, '-',
	     { text: '撤回', iconCls: 'icon-undo', handler: function () {
	       //取消当前编辑行把当前编辑行罢undefined回滚改变的数据,取消选择的行
	       editIndex = undefined;
	       $('#dataBasic').datagrid("rejectChanges");
	       $('#dataBasic').datagrid("unselectAll");
	      }
	     }, '-',
	     { text: '保存', iconCls: 'icon-save', handler: function () {
	       //保存时结束当前编辑的行，自动触发onAfterEdit事件如果要与后台交互可将数据通过Ajax提交后台
	       $('#dataBasic').datagrid("endEdit", editIndex);
	      // 如果有数据修改过才进行提交
	       if ($('#dataBasic').datagrid('getChanges').length) {
	        // 获取已修改的数据
	        var str = [];
	        var updated = $('#dataBasic').datagrid('getChanges');
	        for(var i=0;i<updated.length;i++){
	         var arr = {};
	         arr.sb_id=updated[i].sb_id;
	         arr.type=updated[i].type;
	         arr.sbdlmc=updated[i].sbdlmc;
	         arr.sbmc=updated[i].sbmc;
	         arr.sbpp=updated[i].sbpp;
	         arr.ggxhj=updated[i].ggxhj;
	         arr.is_black=updated[i].is_black;
	         arr.is_blue=updated[i].is_blue;
	         arr.is_yellow=updated[i].is_yellow;
	         arr.is_red=updated[i].is_red;
	         str[i] = arr;
	        }
	        // 后台处理数据时先显示一个提示框，防止用户多次点击【保存】重复提交数据
	        $.messager.progress({
	         title: '提示',
	         msg: '正在保存，请稍候……',
	        });
	        $.ajax({
	         type:"post",
	         dataType: "json",
	         data:{whc:JSON.stringify(str),flag:"1"},
	         url: basePath + "/Security/Sbxx/Base_Commit2",
	         success: function (data) {
	          if (data>0) {
	           $.messager.alert('提示','保存成功!', 'info');
	           $('#dataBasic').datagrid('reload');
	           //editRow = -1;
	          } else {
	           $.messager.alert('提示','保存失败!', 'info');
	
	          }
	          $.messager.progress('close');
	          $('#dataBasic').datagrid('unselectAll');
	         },
	         error: function () {
	          $.messager.alert('警告', '数据向服务器发送失败!', 'info');
	          $.messager.progress('close');
	          $('#dataBasic').datagrid('unselectAll');
	         }
	        });
	       }
	
	      }
	     }, '-',
	     { text: '模板下载', iconCls: 'icon_export', handler: function () {
	       downloadExcel();
	      }
	     }, '-',
	     { text: '导入', iconCls: 'icon_import', handler: function () {
	       showImportDialog();
	      }
	     }, '-',
	     { text: '批量删除', iconCls: 'icon_delete', handler: function () {
	       var checkedItems = $('#dataBasic').datagrid('getChecked');//获取选中行
	       var ids="";
	       $.each(checkedItems, function(index, item){
	        ids+="'"+item.sb_id+"',";//获取选中行设备id
	       });
	       if(ids.length>0){
	         $.messager.confirm('确认','确认删除选中记录吗？',function(r){
	          if (r){
	            $.post(basePath + "Security/Sbxx/Base_Delete?sb_ids=(" + ids.substr(0,ids.length-1) + ")&flag=" + encodeURI("设备删除"),
	                    function (data) {
	                     if (data) {
	                      $.messager.alert('提示', '已删除!','info');
	                      $('#dataBasic').datagrid('reload');
	                     } else {
	                      $.messager.alert('提示', '删除失败!','error');
	                     }
	                    });
	          }
	         });
	       }else{
	        $.messager.alert('提示', '请选中数据!','info');
	       }
	
	      }
	     }],
	    onAfterEdit: function (rowIndex, rowData, changes) {//endEdit该方法触发此事件
	     $('#dataBasic').datagrid('clearSelections');//清除所有选择的行。避免下拉框级联问题
	     editIndex = undefined;
	    }
	   });
	
	   //绑定事件
	   gridTitlebindingClick();
	  });
	  //=======================================自定义方法======================
	  var editIndex = undefined;
	  function endEditing(){
	   if (editIndex == undefined){return true}
	   if ($('#dataBasic').datagrid('validateRow', editIndex)){
	    $('#dataBasic').datagrid('endEdit', editIndex);
	    editIndex = undefined;
	    return true;
	   } else {
	    return false;
	   }
	  }
	  //行编辑功能（双击触发）
	  function onClickRow(index){
	   if (editIndex != index){
	    if (endEditing()){
	     $('#dataBasic').datagrid('selectRow', index).datagrid('beginEdit', index);//其中beginEdit方法为datagrid的方法，具体可以参看api
	     editIndex = index;//给editIndex对象赋值，index为当前行的索引
	    } else {
	     $('#dataBasic').datagrid('selectRow', editIndex);
	    }
	   }
	  }
	  //添加行
	  function append(){
	   if (endEditing()){
	    $('#dataBasic').datagrid('appendRow',{status:'P'});
	    editIndex = $('#dataBasic').datagrid('getRows').length-1;
	    $('#dataBasic').datagrid('selectRow', editIndex).datagrid('beginEdit', editIndex);
	   }
	  }
	
	  //模板下载
	  function downloadExcel() {
	   window.location.href=basePath+'Security/Template/Download?file_flag='+encodeURI("设备信息维护");
	  }
	
	
	  //基础设备导入
	  function showImportDialog(){
	   diag = new Dialog();
	   diag.Title = "信息设备导入" ;
	   diag.URL = basePath + "JumpController/param/Security.Equipment.whjck.upload_base";
	   diag.Width = 500;
	   diag.Height = 100;
	   diag.CancelEvent = function(){
	    diag.close();
	   };
	   diag.show();
	
	  }
	  //附件浏览
	  function file_view(id){
	   diag = new Dialog();
	   diag.Title = "设备附件浏览" ;
	   diag.URL = basePath + "JumpController/param/Security.Equipment.file_view?event_id="+id+"&flag="+encodeURI("设备维护附件");
	   diag.Width = 450;
	   diag.Height = 300;
	   diag.CancelEvent = function(){
	    diag.close();
	   };
	   diag.show();
	  }
	  //设备删除
	  function deleterow(obj,id){
	    $.messager.confirm('确认','您确认想要删除记录吗？',function(r){
	     if (r){
	      if(id>0) {
	       $.post(basePath + "Security/Sbxx/Base_Delete?sb_id=" + id + "&flag=" + encodeURI("设备删除"),
	               function (data) {
	                if (data) {
	                 $.messager.alert('提示', '已删除!','info');
	                 $('#dataBasic').datagrid('reload');
	                } else {
	                 $.messager.alert('提示', '删除失败!','error');
	                }
	               });
	      }else{
	       if (editIndex == undefined){$.messager.confirm('提示', '删除失败,请选定指定行!');}
	       $('#dataBasic').datagrid('cancelEdit', editIndex).datagrid('deleteRow', editIndex);
	       editIndex = undefined;
	      }
	     }
	    });
	  }
	  //附件上传
	  function upload(o,id){
	   if(id>0){
	    diag = new Dialog();
	    diag.Title = "选择文件" ;
	    diag.URL = basePath + "JumpController/param/Security.Equipment.upload?flag="+encodeURI("jcsb")+"&event_id="+id;
	    diag.Width = 500;
	    diag.Height = 100;
	    diag.CancelEvent = function(){
	     diag.close();
	    };
	    diag.show();
	   }else{
	    $.messager.confirm('提示', '未入库设备无法上传附件!');
	   }
	
	  }
	
	
	//给标题绑定click
	  function  gridTitlebindingClick() {
	   $('.datagrid-header-row td').click ( function() {
	    var td_name = $(this).text();
	    var field = $(this).attr("field");
	    console.log("当前点击单元格为【"+td_name+"】"+field)
	    //调用设备名称单元格点击事件
	    if("设备名称" == td_name){
	     Sbmc_Select();
	    }
	   });
	  }
	  function Sbmc_Select(){
	   var title = $('.datagrid-header-row td[field="sbmc"] span');
	   var combobox = '<select name="sbmc" id="sbmc" class ="easyui-combobox seleInput" style =" padding :2px;width : 100px;height: 32px;" prompt="请选择"></select>';
	   var url =basePath+'Security/Sbxx/getOptions3?flag='+encodeURI("sbmc");
	   title.html(combobox);
	   $('#sbmc').combobox({valueField: 'key', textField: 'value', url:url})
	   $('#sbmc').combobox({
	    panelHeight:'auto',
	    editable:false,
	    onChange:function(newValue,oldValue){
	     $.post(basePath+"Security/Sbxx/Base_Page2?unitid="+ encodeURI(unitid)+ "&oilfield=" + encodeURI(oilfield)+"&sbmc="+encodeURI(newValue),//通过ajax的post函数传递查询条件
	             {'page': 1,'rows':15},
	             function(result){//回调函数处理
	              $('#dataBasic').datagrid('loadData',result);//将表格数据初始化的方式更新
	      });
	    }
	   });
	
	  }
	
	  //操作结果提示
	  function success(flag,code,msg) {
	   if(flag=="import"){
	    if(code==0){
	     $.messager.alert('提示',msg,'error');
	    }else if(code==1){
	     $.messager.alert('提示',msg,'info');
	     $('#dataBasic').datagrid('reload');
	    }
	   }else if(flag=="upload"){
	    if(code==0){
	     $.messager.alert('提示',msg,'error');
	    }else if(code==1){
	     $.messager.alert('提示',msg,'info');
	     $('#dataBasic').datagrid('reload');
	    }
	   }
	   diag.close();
	  }
</script>
</body>
</html>

2、后台分页查询

    @ResponseBody
    @RequestMapping("Base_Page2")
    public Map Base_Page2(HttpServletRequest request, HttpServletResponse response, Equipment_BaseEntity entity,int page,int rows) {
        Pager pager= new Pager();
        pager.setPageNo(page);
        pager.setPageSize(rows);
        SetPageUtil.setPage(entity, pager);
        Map maps = baseService.Base_Page(request, response, entity);
        Map<String, Object> map = new HashMap<>();
        map.put("page", pager.getPageNo());
        map.put("total", maps.get("totalRows"));
        map.put("rows", maps.get("entityList"));
        return map;
    }