JQuery grep过滤操作

JQuery grep过滤

问题简介

接口返回的数据需要显示在页面表格中，其中Count字段表示个数，需要根据页面中单选按钮选择的内容筛选出对应数量的数据，全部则显示所有内容，数量不为0则显示Count字段不为0的数据，数量为0则显示Count字段为0的数据。

解决问题方法

通过ajax获取的数据进行if…else…和for操作，获取相应的数据。代码如下：
页面代码：

    <div data-options="region:'west'" style="width:240px;" split="true">
        <div id="radioFilter">
            <table>
                <tr>
                    <td>
                        <input type="radio" value="0" title="全部" name="ShowExistInter" />
                        <input type="radio" value="1" title="数量不为0" name="ShowExistInter" />
                        <input type="radio" value="2" title="数量为0" name="ShowExistInter" />
                    </td>
                </tr>
            </table>
        </div>
        <table id="dgInterType" border="0"></table>
    </div>

js代码：

var $radioFilter = $('#radioFilter');
var $showExistInter = $radioFilter.find('input[name="ShowExistInter"]');
function dgInterTypeInit() {
    $('body').loading()
    $.ajax({
        url: '/api/testurl',
        success: function (res) {
            $('body').loaded();
            var filter = $showExistInter.filter(':checked').val();
            var resList = [];
            if( filter == 1 ){
            	for(var i=0;i<res.length;i++){
					if(res[i].Count > 0){
						resList.push(res[i]);
					}
				}
            }else if(filter == 2){
				for(var i=0;i<res.length;i++){
					if(res[i].Count == 0){
						resList.push(res[i]);
					}
				}
			}else{
				resList = res;
			}

            if ($dgInterType) {
                $dgInterType.datagrid('loadData', resList);
                return;
            }
            $dgInterType = $('#dgInterType');
            $dgInterType.datagrid({
                title: 'test',
                data: resList ,
                columns: [[
                    { title: "A",  field: 'fieldA', width: 40 },
                    { title: 'B', field: 'fieldB', width: 40 }
                ]],
            });
        }
    });
}

//初始化
$(function () {
    dgInterTypeInit();
    $showExistInter.change(function () { dgInterTypeInit(); });
});

使用$.grep()进行代码重构

上面的代码能够完成功能，可读性也还行吧，但是比不了下面的代码。

$.grep(res,function(n,i){
	// res 表示接口返回的数据列表
	// n 表示数据列表中的每一条数据
	// i 表示每条数据的索引
})

重构后的js代码：

var $radioFilter = $('#radioFilter');
var $showExistInter = $radioFilter.find('input[name="ShowExistInter"]');
function dgInterTypeInit() {
    $('body').loading()
    $.ajax({
        url: '/api/testurl',
        success: function (res) {
            $('body').loaded();
            var filter = $showExistInter.filter(':checked').val();
            res = $.grep(res, function (n, i) {
                return filter == 0 ||
                    (filter == 1 && n.Count > 0) ||
                    (filter == 2 && n.Count == 0)
            });

            if ($dgInterType) {
                $dgInterType.datagrid('loadData', res);
                return;
            }
            $dgInterType = $('#dgInterType');
            $dgInterType.datagrid({
                title: 'test',
                data: res,
                columns: [[
                    { title: "A",  field: 'fieldA', width: 40 },
                    { title: 'B', field: 'fieldB', width: 40 }
                ]],
            });
        }
    });
}

//初始化
$(function () {
    dgInterTypeInit();
    $showExistInter.change(function () { dgInterTypeInit(); });
});