EasyUI form to add filtering and exporting methods

I. Introduction

When writing a front-end page recently, it is necessary to query the form data from the background;

After finding the data, I want to add a data filtering function. If I check the background again, it will affect the efficiency (you have to add parameters, call the background interface again, and then execute sql in the background). I wonder if the front end can filter the obtained data by itself . , do not call the background interface again.

At the same time, I also want to add an export function to excel, and I also want to see if the front end can export it by itself without calling the background interface.

2. Brief description of the implementation method

1. The front-end project is EasyUI, and the front-end and back-end are not separated;
2. Using EasyUI's datagrid-export.jssum datagrid-filter.jscan be quickly realized.
Official document address:

http://www.jeasyui.com/extension/datagrid_export.php
http://www.jeasyui.com/extension/datagrid_filter.php

3. Final effect

Three, the detailed steps of the implementation method

1. The front-end project of EasyUI is available.

2. Open the official website connection, download the compressed package of datagrid_exportand datagrid_filter(there is a download button at the bottom of the official website), find datagrid-export.jsand datagrid-filter.jsthese two files, and put them in your own project.

3. datagrid-filter.jsIt is used for table screening. After use, the first row of the table will become a filter row; the one
I use has no style set, and you can also read official documents and set it as a drop-down menu.
The code is relatively simple, mainly as follows:

//注意路径src，看放在项目的哪里了，根据实际情况填写
<script type="text/javascript" src="datagrid-filter.js"></script>

//这个是表格，id是myDataTable
	<div data-options="region:'center',border:false" style="overflow: hidden;">
		<table id="myDataTable">
		</table>
	</div>

//启用表格筛选功能，这个myDataTable是表格ID，enableFilter是固定参数
$('#myDataTable').datagrid('enableFilter');

In this way, the form filtering function can be realized.

4. datagrid-export.jsIt is for table export, and the official website has detailed instructions.
I only used to export excel, so it is also the simplest way to write:

//注意路径src，看放在项目的哪里了，根据实际情况填写
<script type="text/javascript" src="datagrid-export.js"></script>

//这个是表格，id是myDataTable
	<div data-options="region:'center',border:false" style="overflow: hidden;">
		<table id="myDataTable">
		</table>
	</div>

//导出方法，找个按钮调用这个方法即可	
		function exportMyTable() {
            $('#myDataTable').datagrid('toExcel','导出表格名称.xls');
		}

4. Remarks

The writing method of EasyUI's tabular data query background interface:

		jQuery(function() {
			//初始化列表
			$('#myDataTable').datagrid({
                iconCls : 'icon-tip',
                //这个接口是后台接口，返回的数据是固定格式的，这样框架就能解析 
                // {"total":10,"rows"[{"id":"1","name":"a"},{"id":"2","name":"b"}]}
                url :  'http://localhost:8080/mytest/tableData', 
                singleSelect : false,
                rownumbers : true,
                pagination : true,//是否显示分页
                pageSize : 10, //每页大小
                //pageList : [ 25, 50, 75, 100 ], //页大小下拉选项，此项各value是pageSize的倍数
                fit : true,//自适应宽度
                fitColumns : false,
                method : 'post',
                nowap : false, //列内容多时自动折至第二行
                striped : true, //行背景交换
                idField : 'id',//此处根据实际情况进行填写，是返回的rows里的每个元素的id
                columns : [ [ {
                    field : 'id',
                    title : 'ID',
                    width : 100
                }, {
                    field : 'name',
                    title : '姓名',
                    align : 'center',
                    width : 70
                }
                    //注：最后一行后面的逗号要去掉
                ] ],
				toolbar : [ {
                    id : 'btnexport',
                    text : '导出',
                    iconCls : 'icon-export',
                    handler : function() {
                        //这个就是上面截图的导出按钮
                        exportMyTable();
                    }
                } ],
                onBeforeLoad : function () {//加载之前，不允许点导出按钮
                    $('#btnexport').linkbutton('disable');
                },
                onLoadSuccess : function(data) {
                    //如果总数据为0条，将当前page设置为第1页
                    if(data.total==0){
                        $(this).datagrid('options').pageNumber=1
                    }
                    if (data.rows.length > 0){
                        $('#btnexport').linkbutton('enable');
                    } else if(data.rows.length == 0) {
                        $('#btnexport').linkbutton('disable');
                    }
                    //这句可以清空datagrid之前的选择状态，防止后续逻辑出错
                    $('#myDataTable').datagrid('clearSelections'); 
                    //启用表格筛选功能
					$('#myDataTable').datagrid('enableFilter');

                }
			});
		});