easyUI datagrid实现前台表单数据转json发送后台请求加载

问题引出

easyUI的datagrid允许使用load方法,通过这样的方式向后台发送数据:

$('#dg').datagrid('load',{
    code: '01',
    name: 'name01'
});

问题来了,很多情况下,列表页上搜索框通常会有很多搜索条件,如果这样一个个条件的拼键值对,费时费力,那么有什么方法来快速把搜索条件批量转成json吗?答案是有的!

解决方案

直接上代码:
JS代码:

/*****************搜索数据****************************/
  $(function () {
      $("#searchBtn").click(function () {
            const serializeArr = $('#fm1').serializeObject();
            $('#dg').datagrid('load', serializeArr);
        });
    })

表单批量转json对象方法:

/**
     * 自动将form表单封装成json对象
     */
  $.fn.serializeObject = function() {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function() {
            if (o[this.name]) {
                if (!o[this.name].push) {
                    o[this.name] = [ o[this.name] ];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };

你可能感兴趣的:(easyui,前端,json)