datagrid在MVC中的运用02-结合搜索

本文接着上一篇，来体验给datagrid加上搜索功能。主要涉及到：

※ 把一个div与datagrid相关起来
※ datagrid接收查询参数
※ 查询参数的封装

效果图：

  查询参数封装

分页相关的是每个页面都能用到的，所以把分页相关的封装成基类。
与查询相关的，封装成继承基类的子类。

    public class PageParam
    {
        public int PageSize { get; set; }
        public int PageIndex { get; set; }
    }

    public class BookParam : PageParam
    {
        public string ItemId { get; set; }
        public string ProductId { get; set; }
    }

  查询Book的服务类方法就要考虑分页和查询参数

using System.Linq; 
using DataGridInMvc.Models; 
using System.Collections.Generic; 
using Microsoft.Ajax.Utilities;

namespace DataGridInMvc.Helper 
{ 
    public class BookService 
    { 
        public IEnumerable<Book> LoadPageBookData(BookParam param, out int total) 
        { 
            //创建Book的集合 
            var books = new List<Book>(); 
            for (int i = 0; i < 30; i++) 
            { 
                books.Add(new Book() 
                { 
                    ItemId = "EST-" + i, 
                    ProductId = "AV-SB-" + i, 
                    ListPrice = (i + 5) * 10m, 
                    UnitCost = (i + 2) * 10m, 
                    Attr1 = "Attr" + i, 
                    Status = (short)0 
                }); 
            }

            //搜索逻辑 
            if (!string.IsNullOrEmpty(param.ItemId)) 
            { 
                books = books.Where(b => b.ItemId.Contains(param.ItemId)).ToList(); 
            }

            if (!string.IsNullOrEmpty(param.ProductId)) 
            { 
                books = books.Where(b => b.ProductId.Contains(param.ProductId)).ToList(); 
            }

            total = books.Count(); 
            var result = books.OrderBy(b => b.ItemId) 
                .Skip(param.PageSize*(param.PageIndex - 1)) 
                .Take(param.PageSize); 
            return result; 
        } 
    } 
}

 

  视图

datagrid的toolbar属性能把div与datagrid相关起来，并显示到datagrid的顶部。
dtagrid的queryParams属性能接受查询参数，传递给Controller.
点击查询按钮的时候，需要带上参数。

    <link href="~/Content/themes/default/easyui.css" rel="stylesheet" /> 
    <link href="~/Content/themes/icon.css" rel="stylesheet" /> 
    <script src="~/Scripts/jquery-1.10.2.js"></script> 
    <script src="~/Scripts/jquery.easyui.min.js"></script> 
    <script src="~/Scripts/easyui-lang-zh_CN.js"></script> 
    <script type="text/javascript"> 
        $(function() { 
            initData();

            $('#btnQuery').click(function() { 
                initData(initQuery()); 
            }); 
        });

        function initData(params) { 
            $('#tt').datagrid({ 
                url: 'Home/GetData', 
                width: 500, 
                height: 350, 
                title: 'Book列表', 
                iconCls: 'icon-save', 
                fitColumns: true, 
                rownumbers: true, //是否加行号 
                pagination: true, //是否显式分页 
                pageSize: 15, //页容量，必须和pageList对应起来，否则会报错 
                pageNumber: 2, //默认显示第几页 
                pageList: [15, 30, 45],//分页中下拉选项的数值 
                columns: [[ 
                    //book.ItemId, book.ProductId, book.ListPrice, book.UnitCost, book.Status, book.Attr1 
                    { field: 'ItemId', title: '主键', sortable: true }, 
                    { field: 'ProductId', title: '产品编号' }, 
                    { field: 'Attr1', title: '属性' }, 
                    { field: 'UnitCost', title: '成本价' }, 
                    { field: 'ListPrice', title: '零售价' }, 
                    { field: 'Status', title: '状态' } 
                ]], 
                toolbar: '#tb',//搜索div 
                queryParams: params //搜索json

            }); 
        }

        function changeP() { 
            var dg = $('#tt'); 
            dg.datagrid('loadData', []); //重新加载数据 
            dg.datagrid({ pagePosition: $('#p-pos').val() }); //分页位置 
            dg.datagrid('getPager').pagination({ //分页样式、内容 
                layout: ['list', 'sep', 'first', 'prev', 'sep', $('#p-style').val(), 'sep', 'next', 'last', 'sep', 'refresh'] 
            }); 
        }

        //表单查询值组成json对象 
        function initQuery() { 
            var queryParams = { 
                ItemId: $('#itemid').val(), 
                ProductId: $('#productid').val() 
            }; 
            return queryParams; 
        } 
    </script> 
    <p> 
        选择分页显示位置： 
        <select id="p-pos" onchange="changeP()"> 
            <option>bottom</option> 
            <option>top</option> 
            <option>both</option> 
        </select> 
        选择分页显示样式 
        <select id="p-style" onchange="changeP()"> 
            <option>manual</option> 
            <option>links</option> 
        </select> 
    </p> 
    
    <table id="tt"> 
    </table> 
    
    <!--搜索开始--> 
    <div id="tb" style="padding:3px"> 
        <span>主键:</span> 
        <input id="itemid" style="line-height:22px;border:1px solid #ccc"> 
        <span>产品编号:</span> 
        <input id="productid" style="line-height:22px;border:1px solid #ccc"> 
        <a href="#" class="easyui-linkbutton" plain="false" id="btnQuery">搜索</a> 
    </div> 
    <!--搜索结束—>

  Controller

using System.Web; 
using System.Web.Mvc; 
using DataGridInMvc.Helper; 
using DataGridInMvc.Models;

namespace DataGridInMvc.Controllers 
{ 
    public class HomeController : Controller 
    { 
        public ActionResult Index() 
        { 
            return View(); 
        }

        // 
        public ActionResult GetData() 
        { 
            //接收datagrid传来的参数 
            int pageIndex = int.Parse(Request["page"]); 
            int pageSize = int.Parse(Request["rows"]);

            //接收搜索参数 
            string itemId = Request["ItemId"]; 
            string productId = Request["ProductId"];

            //构建得到分页数据方法所需的参数 
            var temp = new BookParam() 
            { 
                PageIndex = pageIndex, 
                PageSize = pageSize, 
                ItemId = itemId, 
                ProductId = productId 
            };

            //分页数据方法的输出参数 
            int totalNum = 0;

            var service = new BookService(); 
            var books = service.LoadPageBookData(temp, out totalNum);

            var result = from book in books 
                select new {book.ItemId, book.ProductId, book.ListPrice, book.UnitCost, book.Status, book.Attr1};

            //total,rows是前台datagrid所需要的 
            var jsonResult = new {total = totalNum, rows = result};

            //把json对象序列化成字符串 
            string str = JsonSerializeHelper.SerializeToJson(jsonResult); 
            return Content(str); 
        } 
    } 
}

 

JsonSerializeHelper静态类在上一篇介绍过。