基于BootstrapTable的简单应用

Bootstrap Table基于Bootstrap的jQuery表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。

本文将以一个基于BootstrapTable控件的图书列表查询功能为实例（如图1）。注意本实例使用了ASP.NET MVC。

图1

页面代码：

@{
    Layout = null;
    ViewBag.Title = "基于BootstrapTable的简单应用";
}






    

        
查询条件
        

            

                

                    

                        图书名称：
                        
                    
                    

                        图书作者：
                        
                    
                    

                        出版社：
                        
                    
                

                

                    

                        
                        
                    
                
            
        
    
    
    

控制器代码：

/// 

/// 查询图书信息
/// 
/// 
/// 
public JsonResult SearchBookInfo(BookInfo param, int pageSize, int pageIndex)
{
    //获取图书列表
    List bookList = GetBookList();

    //根据条件筛选数据
    if (!String.IsNullOrEmpty(param.Title))
    {
        bookList = bookList.Where(a => a.Title.Contains(param.Title)).ToList();
    }
    if (!String.IsNullOrEmpty(param.Author))
    {
        bookList = bookList.Where(a => a.Author.Contains(param.Author)).ToList();
    }
    if (!String.IsNullOrEmpty(param.Publish))
    {
        bookList = bookList.Where(a => a.Publish.Contains(param.Publish)).ToList();
    }

    //BootstrapTable的返回结果
    BootstrapTableResult result = new BootstrapTableResult();
    result.total = bookList.Count;
    result.rows = bookList;
    return Json(result);
}

/// 
    
/// 获取图书列表    
/// 
    
///     
public List GetBookList()
{
    List bookList = new List();
    BookInfo book1 = new BookInfo()
    {
        BookId = 8,
        Title = "ASP.NET MVC 5高级编程",
        Author = "加洛韦",
        Publish = "清华大学出版社",
        PublishDate = new DateTime(2017, 08, 15),
        Price = 29.99
    };
    bookList.Add(book1);
    BookInfo book2 = new BookInfo()
    {
        BookId = 9,
        Title = "Java从入门到精通",
        Author = "明日科技",
        Publish = "清华大学出版社",
        PublishDate = new DateTime(2015, 09, 28),
        Price = 38.55
    };
    bookList.Add(book2);
    BookInfo book3 = new BookInfo()
    {
        BookId = 10,
        Title = "Oracle从入门到精通",
        Author = "秦靖",
        Publish = "机械工业出版社",
        PublishDate = new DateTime(2014, 10, 08),
        Price = 38.55
    };
    bookList.Add(book3);
    return bookList;
}

其他代码：

/// 
    
/// 图书信息实体类    
/// 
    
public class BookInfo
{
    public int BookId { set; get; }             //图书ID    
    public string Title { set; get; }           //图书名称    
    public string Author { set; get; }          //图书作者  
    public string Publish { set; get; }         //出版社
    public DateTime PublishDate { set; get; }   //出版时间    
    public Double Price { set; get; }           //销售价格    
}

 

/// 

/// BootstrapTable返回结果类
/// 
public class BootstrapTableResult
{
    public int total { get; set; }      //总记录数
    public List rows { get; set; }   //数据列表
}

Bootstrap Table资料网站：http://bootstrap-table.wenzhixin.net.cn/zh-cn/