接上一篇,希望对大家有所帮助

作者: 前端  发布:2019-08-28

Jquery easyui datagrid 删除多行问题

前台代码

 

<script type="text/javascript">
$(function () {
$('#test').datagrid({
title: '风格信息',
iconCls: 'icon-save',
fit: true,
nowrap: false,
striped: true,
//collapsible: true,
url: '/GenerManage/LoadAllByPage/',
sortName: 'GenreId',
remoteSort: false,
idField: 'GenreId',
frozenColumns: [[
     { field: 'ck', checkbox: true }
                ]],
columns: [[
             { field: 'GenreId', title: '编码', width: '80', align: 'center' },
                    { field: 'Name', title: '名称', width: '200', align: 'left' },
{ field: 'Desctiption', title: '描述', width: '350', align: 'left' }
                ]],
pagination: true,
rownumbers: true,
toolbar: [{
id: 'btnadd',
text: '添加',
iconCls: 'icon-add',
handler: function () {
this.href = '/GenerManage/View/';
}
}, {
id: 'btnupdate',
text: '修改',
iconCls: 'icon-save',
handler: function () {
var rows = $('#test').datagrid('getSelected');
if (rows) {
this.href = "/GenerManage/View/"   rows.GenreId;
}
else {
$.messager.alert('提示', '请选择要修改的数据');
return;
}
}
}, '-', {
id: 'btncut',
text: '删除',
iconCls: 'icon-cut',
handler: function () {
//获取表格选择行
var rows = $('#test').datagrid('getSelections');
//判断是否选择行
if (!rows || rows.length == 0) {
$.messager.alert('提示', '请选择要删除的数据!', 'info');
return;
}

var parm;
//循环给提交删除参数赋值(音乐风格编码)
$.each(rows, function (i, n) {
if (i == 0) {
parm = "idList="   n.GenreId;
} else {
parm  = "&idList="   n.GenreId;
}
});
$.messager.confirm('提示', '是否删除选中数据?', function (r) {
if (!r) {
return;
}
//提交
$.post('/GenerManage/Delete/', parm,
function (msg) {
if (msg.IsSuccess) {
$.messager.alert('提示', msg.Message, 'info', function () {
//重新加载当前页
$('#test').datagrid('reload');
});
} else {
$.messager.alert('提示', msg.Message, 'info')
}
});
});
}
}]
});
var p = $('#test').datagrid('getPager');
if (p) {
$(p).pagination({
onBeforeRefresh: function () {
alert('before refresh');
}
});
}
});
</script>

 

easyui datagrid 删除多行问题 前台代码 script type=text/javascript$(function () {$(#test).datagrid({title: 风格信息,iconCls: icon-save,fit: true,nowrap: false,s...

这个js代码是别人写的,可能不是最好的,但我个人觉得首先能帮助别人解决功能问题的话就特别好。我稍加修改后用在了自己的项目上了,这里贴出来分享一下。后台用的TinkPHP因为都是查增删改比较简单,这里就不贴了。前台效果图因为比较懒,也不贴了。

实现easyui的datagrid导出为excel的示例代码,easyuidatagrid

之前有介绍过如何实现easyui里datagrid内容的打印,今天给大家介绍下如何实现datagrid内容导出为excel文件。以下为代码实现:

export.js

function ChangeToTable(printDatagrid) {
  var tableString = '<table cellspacing="0" class="pb">';
  var frozenColumns = printDatagrid.datagrid("options").frozenColumns; // 得到frozenColumns对象
  var columns = printDatagrid.datagrid("options").columns;  // 得到columns对象
  var nameList = new Array();

  // 载入title
  if (typeof columns != 'undefined' && columns != '') {
    $(columns).each(function (index) {
      tableString  = 'n<tr>';
      if (typeof frozenColumns != 'undefined' && typeof frozenColumns[index] != 'undefined') {
        for (var i = 0; i < frozenColumns[index].length;   i) {
          if (!frozenColumns[index][i].hidden) {
            tableString  = 'n<th width="'   frozenColumns[index][i].width   '"';
            if (typeof frozenColumns[index][i].rowspan != 'undefined' && frozenColumns[index][i].rowspan > 1) {
              tableString  = ' rowspan="'   frozenColumns[index][i].rowspan   '"';
            }
            if (typeof frozenColumns[index][i].colspan != 'undefined' && frozenColumns[index][i].colspan > 1) {
              tableString  = ' colspan="'   frozenColumns[index][i].colspan   '"';
            }
            if (typeof frozenColumns[index][i].field != 'undefined' && frozenColumns[index][i].field != '') {
              nameList.push(frozenColumns[index][i]);
            }
            tableString  = '>'   frozenColumns[0][i].title   '</th>';
          }
        }
      }
      for (var i = 0; i < columns[index].length;   i) {
        if (!columns[index][i].hidden) {
          tableString  = 'n<th width="'   columns[index][i].width   '"';
          if (typeof columns[index][i].rowspan != 'undefined' && columns[index][i].rowspan > 1) {
            tableString  = ' rowspan="'   columns[index][i].rowspan   '"';
          }
          if (typeof columns[index][i].colspan != 'undefined' && columns[index][i].colspan > 1) {
            tableString  = ' colspan="'   columns[index][i].colspan   '"';
          }
          if (typeof columns[index][i].field != 'undefined' && columns[index][i].field != '') {
            nameList.push(columns[index][i]);
          }
          tableString  = '>'   columns[index][i].title   '</th>';
        }
      }
      tableString  = 'n</tr>';
    });
  }
  // 载入内容
  var rows = printDatagrid.datagrid("getRows"); // 这段代码是获取当前页的所有行
  for (var i = 0; i < rows.length;   i) {
    tableString  = 'n<tr>';
    for (var j = 0; j < nameList.length;   j) {
      var e = nameList[j].field.lastIndexOf('_0');

      tableString  = 'n<td';
      if (nameList[j].align != 'undefined' && nameList[j].align != '') {
        tableString  = ' style="text-align:'   nameList[j].align   ';"';
      }
      tableString  = '>';
      if (e   2 == nameList[j].field.length) {
        tableString  = rows[i][nameList[j].field.substring(0, e)];
      }
      else
        tableString  = rows[i][nameList[j].field];
      tableString  = '</td>';
    }
    tableString  = 'n</tr>';
  }
  tableString  = 'n</table>';
  return tableString;
}

function Export(strXlsName, exportGrid) {
  var f = $('<form action="/export.aspx" method="post" id="fm1"></form>');
  var i = $('<input type="hidden" id="txtContent" name="txtContent" />');
  var l = $('<input type="hidden" id="txtName" name="txtName" />');
  i.val(ChangeToTable(exportGrid));
  i.appendTo(f);
  l.val(strXlsName);
  l.appendTo(f);
  f.appendTo(document.body).submit();
  document.body.removeChild(f);
}

export.aspx

protected void Page_Load(object sender, EventArgs e)
    {
      Response.Clear();
      Response.Buffer = true;
      Response.Charset = "utf-8";
      Response.ContentEncoding = System.Text.Encoding.UTF8;
      Response.AppendHeader("content-disposition", "attachment;filename=""   HttpUtility.HtmlEncode(Request["txtName"]??DateTime.Now.ToString("yyyyMMdd"))   ".xls"");
      Response.ContentType = "Application/ms-excel";
      Response.Write("<html>n<head>n");
      Response.Write("<style type="text/css">n.pb{font-size:13px;border-collapse:collapse;} " 
              "n.pb th{font-weight:bold;text-align:center;border:0.5pt solid windowtext;padding:2px;} "  
              "n.pb td{border:0.5pt solid windowtext;padding:2px;}n</style>n</head>n");
      Response.Write("<body>n"   Request["txtContent"]   "n</body>n</html>");
      Response.Flush();
      Response.End(); 
    }

其中export.aspx为了防止前台页面内容干扰,前台页面只留:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="export.aspx.cs" Inherits="newland.WebUI.export" ValidateRequest="false" %> 

这句话,其他的全部删除。

调用方法:

<a href="javascript:void(0);" onclick="Export('导出excel', $('#grid'));">导出</a> 

以上就是小编为大家带来的实现easyui的datagrid导出为excel的示例代码全部内容了,希望大家多多支持帮客之家~

之前有介绍过如何实现easyui里datagrid内容的打印,今天给大家介绍下如何实现datagrid内...

接上一篇:

$(function () {
    var datagrid; //定义全局变量datagrid
    var editRow = undefined; //定义全局变量:当前编辑的行
    datagrid = TskupluAddPacket.datagrid({
        url: ThinkPHP['MODULE']   '/Tskuplu/getPacketList', //请求的数据源
        iconCls: 'icon-save', //图标
        pagination: true, //显示分页
        pageSize: 15, //页大小
        pageList: [15, 30, 45, 60], //页大小下拉选项此项各value是pageSize的倍数
        fit: true, //datagrid自适应宽度
        fitColumn: false, //列自适应宽度
        striped: true, //行背景交换
        nowap: true, //列内容多时自动折至第二行
        border: false,
        idField: 'packetid', //主键
        sortName : 'packetid',                                  //排序字段
        sortOrder : 'desc',                  //排序方式
        columns: [[//显示的列
            {field: 'packetid', title: 'ID', width: 100, sortable: true, checkbox: true },
            { field: 'packunit', title: '包装单位', width: 100, sortable: true,
                editor: { type: 'validatebox', options: { required: true} }
            },
            { field: 'packqty', title: '包装细数', width: 100,
                editor: { type: 'validatebox', options: { required: true} }
            },
            { field: 'packspec', title: '包装规格', width: 100,
                editor: { type: 'validatebox', options: { required: true} }
            }
        ]],
        queryParams: { 
          pluid: $('#addpluid').val()
        }, //查询参数
        toolbar: [{ text: '添加', iconCls: 'icon-add', handler: function () {//添加列表的操作按钮添加,修改,删除等
            //添加时如果没有正在编辑的行,则在datagrid的第一行插入一行
            if (editRow == undefined) {                     
                datagrid.datagrid("insertRow", {
                    index: 0, // index start with 0
                    row: {}
                });          
                //将新插入的那一行开户编辑状态
                datagrid.datagrid("beginEdit", 0);
                //给当前编辑的行赋值
                editRow = 0;
            }
        }
        }, '-',
        { text: '删除', iconCls: 'icon-remove', 
          handler: function () {
             //删除时先获取选择行
             var rows = datagrid.datagrid("getSelections");
             //选择要删除的行
             if (rows.length > 0) {
                $.messager.confirm("提示", "你确定要删除吗?", function (r) {
                  if (r) {
                    var ids = [];
                    for (var i = 0; i < rows.length; i  ) {
                      ids.push(rows[i].packetid);
                    }
                    //将选择到的行存入数组并用,分隔转换成字符串,
                    //本例只是前台操作没有与数据库进行交互所以此处只是弹出要传入后台的id
                    //alert(ids.join(','));
                    $.ajax({
                      url : ThinkPHP['MODULE']   '/Tskuplu/deletePacket',
                      type : 'POST',
                      data : {
                        ids : ids.join(',')
                      },
                      beforeSend : function (){
                        $.messager.progress({
                          text : '正在处理中...'
                        });  
                      },
                      success : function (data){
                        $.messager.progress('close');
                        if (data >0){
                          datagrid.datagrid('reload');
                          $.messager.show({
                            title : '操作提醒',
                            msg  : data   '条数据被成功删除!'
                          })
                        } else if( data == -999 ) {
                          $.messager.alert('删除失败', '对不起,您没有权限!', 'warning');
                        } else {
                          $.messager.alert('删除失败', '没有删除任何数据!', 'warning');
                        }
                      }
                    });                  
                  }
                });
             } else {
                $.messager.alert("提示", "请选择要删除的行", "error");
             } 
          }
        }, '-',
        { text: '修改', iconCls: 'icon-edit', 
          handler: function () {
            //修改时要获取选择到的行
            var rows = datagrid.datagrid("getSelections");
            //如果只选择了一行则可以进行修改,否则不操作
            if (rows.length == 1) {
              //当无编辑行时
              if (editRow == undefined) {
                //获取到当前选择行的下标
                var index = datagrid.datagrid("getRowIndex", rows[0]);
                //开启编辑
                datagrid.datagrid("beginEdit", index);
                //把当前开启编辑的行赋值给全局变量editRow
                editRow = index;
                //当开启了当前选择行的编辑状态之后,
                //应该取消当前列表的所有选择行,要不然双击之后无法再选择其他行进行编辑
                datagrid.datagrid("unselectAll");
              }
            }
          }
        }, '-',
        { text: '保存', iconCls: 'icon-save', 
          handler: function () {
             //保存时结束当前编辑的行,自动触发onAfterEdit事件如果要与后台交互可将数据通过Ajax提交后台
             datagrid.datagrid("endEdit", editRow); 
             editRow = undefined;
          }
        }, '-',
        { text: '取消编辑', iconCls: 'icon-redo', 
          handler: function () {
             //取消当前编辑行把当前编辑行罢undefined回滚改变的数据,取消选择的行
             editRow = undefined;
             datagrid.datagrid("rejectChanges");
             datagrid.datagrid("unselectAll");
          }
        }, '-'],
        onAfterEdit: function (rowIndex, rowData, changes) {
          //endEdit该方法触发此事件           
          //var row = datagrid.datagrid("getData").rows[rowIndex]; //获取某一行的值 
          var inserted = datagrid.datagrid('getChanges','inserted');
          var updated = datagrid.datagrid('getChanges','updated');
          if(inserted.length < 1 && updated.length <1){
            editRow = undefined;
            datagrid.datagrid('unselectAll');
            return;
          }
          var url = '';
          if(inserted.length>0){
            url=ThinkPHP['MODULE']   '/Tskuplu/addPacket';
          }
          if(updated.length>0){
            url=ThinkPHP['MODULE']   '/Tskuplu/updatePacket';
          }
          $.ajax({
            url : url,
            type : 'POST',
            data : {
              'pluid': $('#addpluid').val(),
              'packetid':rowData.packetid,
              'packunit':rowData.packunit,
              'packqty' :rowData.packqty,
              'packspec':rowData.packspec
            },
            beforeSend : function (){
              $.messager.progress({
                text : '正在处理中...'
              })
            },
            success : function (data){
              $.messager.progress('close');
              if (data > 0){ 
                datagrid.datagrid("acceptChanges"); 
                $.messager.show({
                  title : '操作提示',
                  msg : '添加成功'
                });      
                editRow = undefined;
                datagrid.datagrid("reload"); 
                $('#addcheck').val(1);
              } else if (data == -999) {
                $.messager.alert('添加失败', '抱歉!您没有权限!', 'warning');
              } else {
                datagrid.datagrid("beginEdit",editRow); 
                $.messager.alert('警告操作', '未知错误!请重新刷新后提交!', 'warning');
              }
              datagrid.datagrid("unselectAll"); 
            }
          });
          //////////////////                         
        },
        onDblClickRow: function (rowIndex, rowData) {
        //双击开启编辑行
          if (editRow == undefined) {
              datagrid.datagrid("beginEdit", rowIndex);
              editRow = rowIndex;
          }
        }
    });   
  });

km之路--002 easyui 一

以上所述是小编给大家介绍的EasyUI中的dataGrid的行内编辑,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

删除功能

先写这个功能是因为这个功能比较好做

对于删除功能而言,首先需要明白的是如下三个问题:

  1. 如何判断是否选中了数据以及选中了几条数据?

  2. 删除一条数据如何做?

3. 删除多条数据如何做?以及是否需要支持翻页选择的多条数据的删除?如果需要支持,如何做?

 

您可能感兴趣的文章:

  • jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
  • Easyui笔记2:实现datagrid多行删除的示例代码
  • Jquery EasyUI Datagrid右键菜单实现方法
  • jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
  • jQuery Easyui datagrid连续发送两次请求问题
  • 详解jquery easyui之datagrid使用参考
  • 实现easyui的datagrid导出为excel的示例代码
  • easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
  • jQuery EasyUI编辑DataGrid用combobox实现多级联动

singleSelect属性

这个属性的解释为:如果为true,则只允许选择一行。默认为false。

也就是说默认是支持多行选择的。这里暂且不考虑只能选择一行的情况

 

删除按钮状态

 

在真正实现删除功能之前,先考虑一个小问题:delete按钮是否随时都是可点击状态的?即:

  1. 先把删除按钮设置为disabled,当选中数据的时候再把删除按钮设置为可用

2. 删除按钮始终可点击,当点击删除按钮时,再去判断是否选中了数据,如果选中了,则进行删除操作,反之则提醒用户先选中数据

9159.com,我选择第二种方式。

原因:选中数据不仅仅是选中一行或多行,也不仅仅是单击与双击,还有可能是选择datagrid前面的checkbox,或者选中的是一个单元格,又或者是支持键盘操作的datagrid。先不论键盘操作,单是如下四个事件处理起来就很麻烦了:

9159.com 1

所以我选择比较简单的第二种方式【当然,主要是我比较菜】

 

合并问题

其实完全可以把删除一行的功能放到删除多行中进行。因为删除一行只是删除多行的特殊情况。

翻页选择

这样我们就只剩下一个问题了:是否支持翻页选择?如果需要支持,如何做?

根据如下博客:

关于easyui的datagrid翻页保存选中项 

可以得知只要设置了idField属性,就可以支持翻页选择了。既然如此,那么问题来了:支持翻页选择是否有必要?我倾向于没有必要。如果需要大批量的删除数据,我们可以直接做一个大批量删除数据的功能,没有必要进行一页一页的查找、选择、删除这样的操作。

 

删除功能实现

===流程

在前面的快速例子的基础上

  1. 把student/list.html中的idField属性删除

  2. 添加删除按钮的handler实现

  2.1 判断是否已经选择数据

    2.1.1 如果没有选择数据,则提示用户选择数据

    2.1.2 如果已经选择数据,则进行删除操作

      2.1.2.1 把所选择数据的ID拼接起来,形如:1,2,3

      2.1.2.2 请求后台

      2.1.2.3 根据后台返回结果进行相应提示 

      2.1.2.4 reload datagrid     

  1. 实现后台批量功能

===后台功能实现

===>>===controller

 1 /**
 2  * 根据ID列表批量删除,参数规则为id1,id2,id3,...
 3  * @param ids 待删除对象的ID列表
 4  * @return 业务状态信息描述对象。
 5  * @see com.laolang.easyui.pojo.EasyuiResult 
 6  */
 7 @RequestMapping(value = "delete/ids",method = RequestMethod.POST, produces = "application/json; charset=utf-8")
 8 public ResponseEntity<EasyuiResult> delete(@RequestParam(value="ids") String ids){
 9     EasyuiResult easyuiResult = new EasyuiResult();
10     try {
11         List<Object> idList = KMStringUtils.getIdsStringArray(ids);
12         Integer result = studentService.deleteByIds(Student.class, "id", idList);
13         if( 0 >= result ) {
14             easyuiResult.changeToFailed();
15         }
16         return ResponseEntity.ok(easyuiResult);
17     }catch (Exception e) {
18         e.printStackTrace();
19     }
20     easyuiResult.changeError();
21     return ResponseEntity.status(HttpStatus.SC_INTERNAL_SERVER_ERROR).body(easyuiResult);
22 }

 

 

===>>===EasyuiResult

 1 package com.laolang.easyui.one.pojo;
 2 
 3 public class EasyuiResult {
 4 
 5     public EasyuiResult() {
 6         this.code = CODE_SUCCESS;
 7         this.desc = DESC_SUCCESSS;
 8     }
 9 
10     public void changeToSuccess() {
11         this.code = CODE_SUCCESS;
12         this.desc = DESC_SUCCESSS;
13     }
14 
15     public void changeToFailed() {
16         this.code = CODE_FAILED;
17         this.desc = DESC_FAILED;
18     }
19     
20     public void changeError() {
21         this.code = CODE_ERROR;
22         this.desc = DESC_ERROR;
23     }
24 
25     @Override
26     public String toString() {
27         return "EasyuiResult [code="   code   ", desc="   desc   "]";
28     }
29 
30     public Integer getCode() {
31         return code;
32     }
33 
34     public void setCode(Integer code) {
35         this.code = code;
36     }
37 
38     public String getDesc() {
39         return desc;
40     }
41 
42     public void setDesc(String desc) {
43         this.desc = desc;
44     }
45 
46     public static final Integer CODE_SUCCESS = 200;
47 
48     public static final Integer CODE_FAILED = 300;
49 
50     public static final Integer CODE_ERROR = 400;
51 
52     public static final String DESC_SUCCESSS = "success";
53 
54     public static final String DESC_FAILED = "failed";
55 
56     public static final String DESC_ERROR = "error";
57 
58     /**
59      * 业务状态码 <br />
60      * 200 : 执行成功<br />
61      * 300 : 执行失败<br />
62      * 400 : 出错
63      */
64     private Integer code;
65 
66     /**
67      * 业务状态描述<br />
68      * success : 执行成功<br />
69      * failed : 执行失败<br />
70      * error : 出错 
71      * 
72      */
73     private String desc;
74 }

 

 

具体的Service代码与KMStringUtils.getIdsStringArray方法不再列出

===前台 

===>>===删除按钮实现

 1 {
 2 text: '删除',
 3 iconCls: 'icon-remove',
 4 handler: function() {
 5     var rowsSelected = $('#studentListTable').datagrid('getSelections');
 6     if (rowsSelected.length <= 0) {
 7         $.messager.alert('提示', '请至少选择一条数据!');
 8         return;
 9     }
10     for (var i = 0, idArray = []; i < rowsSelected.length; i  ) {
11         idArray[i] = rowsSelected[i].id;
12     }
13     var ids = idArray.join();
14     $.ajax({
15         url: SM.url.student.deleteids,
16         type: 'post',
17         data: 'ids='   ids,
18         dataType: 'json',
19         success: function(msg) {
20             var result = SM.judgeEasyuiResult.judge(msg);
21             if (result.success) {
22                 $.messager.show({
23                     title: '提示',
24                     msg: '删除成功!',
25                     timeout: 3000,
26                     showType: 'slide'
27                 });
28             } else if (result.failed) {
29                 $.messager.show({
30                     title: '提示',
31                     msg: '删除失败!',
32                     timeout: 3000,
33                     showType: 'slide'
34                 });
35             } else if (result.error) {
36                 $.messager.show({
37                     title: '提示',
38                     msg: '未知错误!',
39                     timeout: 3000,
40                     showType: 'slide'
41                 });
42             }
43             $('#studentListTable').datagrid('reload');
44         }
45     });
46 }
47 }

 

 

 

===>>===SM.judgeEasyuiResult.judge

 1 judgeEasyuiResult: {
 2     result : {
 3         success : false,
 4         failed : false,
 5         error : false
 6     },
 7     judge: function (msg) {
 8         SM.judgeEasyuiResult.result.success = false;
 9         SM.judgeEasyuiResult.result.failed = false;
10         SM.judgeEasyuiResult.result.error = false;
11         if( 200 === msg.code ){
12             SM.judgeEasyuiResult.result.success = true;
13         }else if( 300 === msg.code){
14             SM.judgeEasyuiResult.result.failed = true;
15         }else if( 400 === msg.code ){
16             SM.judgeEasyuiResult.result.error = true;
17         }
18         return SM.judgeEasyuiResult.result;
19     }
20 }

 

复杂查询

什么叫复杂查询呢?简而言之,我认为就是查询条件有不确定性、多样性。一个实际的例子,比如当当图书的高级查询:

9159.com 2

那么针对到我们这个小demo中,如果要做复杂查询,只有一个表显示是不太够的,我们还需要如下两个表:

tb_classes : 班级表

tb_score : 成绩表

正常来说,班级信息与成绩信息都是要从数据库查询的,不过这里只做一个示意,暂时不做这两个表,因为我并不是实现完整的学生管理的功能。

查询条件暂时包括所属班级与性别两个条件。

实现

===前台代码

===>>===修改复杂查询面板

 1 <div region="north" title="复杂查询" data-options="height:60,collapsible:false,collapsed:false">
 2     <select name="sex" id="sexSelect" class="easyui-combobox" data-options="panelHeight:'auto'" style="width:100px;">
 3         <option>---</option>
 4         <option value="MAIL">男</option>
 5         <option value="FAMAIL">女</option>
 6     </select>
 7     <select name="classesId" id="classesSelect" class="easyui-combobox" data-options="panelHeight:'auto'" style="100px;">
 8         <option>---</option>
 9         <option value="1">一班</option>
10         <option value="2">二班</option>
11         <option value="3">三班</option>
12         <option value="4">四班</option>
13     </select>
14     <a id="stuSearchBtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>
15 </div>

 

 

===>>===查询按钮功能实现

 1 $('#stuSearchBtn').linkbutton({
 2     onClick: function() {
 3         
 4         var sex = null;
 5         var classesId = null;
 6         var param = {};
 7         sex = $('#sexSelect').combobox('getValue');
 8         classesId = $('#classesSelect').combobox('getValue');
 9         if( '---' != sex ){
10             param.sex = sex;
11         }
12         if( '---' != classesId ){
13             param.classesId = classesId;
14         }
15         
16         
17         console.log('sex:' sex '  classedId:' classesId);
18         $('#studentListTable').datagrid('load',param);
19     }
20 });

 

 

===后台

 1 /**
 2  * 分页查询
 3  * @param page 第几页
 4  * @param size 每页条数
 5  * @param record 查询条件
 6  * @return
 7  */
 8 @RequestMapping(value="list",method = RequestMethod.GET, produces = "application/json; charset=utf-8")
 9 public ResponseEntity<EasyuiGridListPojo<Student>> findPageList(@RequestParam(name = "page", defaultValue = "1") Integer page,
10         @RequestParam(name = "rows", defaultValue = "10") Integer size,Student record){
11     try {
12         PageInfo<Student> pageInfo = studentService.findPageListByWhere(page, size, record);
13         List<Student> students = pageInfo.getList();
14         EasyuiGridListPojo<Student> easyuiGridListPojo = new EasyuiGridListPojo<>();
15         easyuiGridListPojo.setRows(students);
16         easyuiGridListPojo.setTotal(pageInfo.getTotal());
17         return ResponseEntity.ok(easyuiGridListPojo);
18     }catch(Exception e) {
19         
20     }
21     
22     return ResponseEntity.status(HttpStatus.SC_INTERNAL_SERVER_ERROR).body(null);
23 }   

 

 

其实后台代码根本没有修改,还是之前的代码

 

datagrid复杂查询的实现流程

 

实现复杂查询的输入面板

获取复杂查询的条件输入

条件的过滤【如空值或缺省值】

执行datagrid的load方法

 

本文由9159.com发布于前端,转载请注明出处:接上一篇,希望对大家有所帮助

关键词: 9159.com