【BootStrap】--具有增删改查功能的表格Demo

前言

       bootstrap的表格样式，有类似EasyUI的表格，也有卡片式表格，放到移动端显示，各有千秋。但是BootStrap自带的表格是没有操作列的，网上的资源不少，但是都是比较单一、零碎，JS、CSS也经常给的不全，自己经过大概一个月左右的时间，把表格封装了一下,希望能分享给大家。

        表格封装了3个版本，接下来给大家展示一下样式和代码。

版本一

1. 样式

表格布局：

添加：添加一行新的空白代码

修改：选中可修改的列，点击需要修改的单元格，即可变成可编辑的状态。

2.代码

@using DatatableDemo.Models
@using ITOO.FreshNewReport.ViewModel
@{
    Layout = "~/Views/Shared/_Layout.cshtml";

}





    
    
    
    

    @*表格JS*@

    
    

    @*动态添加表格*@
    
    
    
    
    
    
    
    


    @*添加批量删除*@
    
    

    


    @*添加一行新表格数据*@
    
    

    @*表格样式CSS*@
    


    @*添加批量删除*@
    




    

 


    

    @*按钮*@
    


        @*添加按钮*@
        
            添加 
        

        @*修改按钮*@
        
            修改 
        

        @*删除按钮---无弹出框*@
        
            删除
        


    


    @*表格*@
    

        
                @*从数据库读取的数据，遍历ViewModel里面的字段并赋值*@
                @foreach (FamilyInfoViewModel enStuFam in ViewData["DataList"] as List)
                {
                    
                }



            


            

                

                    

                
姓名
                
称谓 
                
年龄 
                
政治面貌
                
电话号码 
                
工作单位
                
家庭住址
            
            

                        

                            
                        

                        
@enStuFam.Name 
                        
@enStuFam.RelationShip
                        
@enStuFam.Age
                        
@enStuFam.PoliticalStatus
                        
@enStuFam.TelNum 
                        
@enStuFam.WorkUnit
                        
@enStuFam.Address 

                    
        
    


    



    @*创建表格*@
    

   

版本二

1. 样式

布局样式：

添加/修改：

2. 代码

@using ITOO.FreshNewReport.ViewModel
@{
    Layout = null;
}



    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    


    

        

            

                
Editable DataTables
                
            
            
            

                

                    

                        

                            DataTable with SortingAdd row
                        
                        

                            
                                    @*
                                    @foreach (FamilyInfoViewModel enStuFam in ViewData["DataList"] as List)
                                    {
                                        
                                            @**@

                                            
                                    }
                                

                                

                                        *@
                                    
姓名
                                    
称谓 
                                    
年龄 
                                    
政治面貌
                                    
电话号码 
                                    
工作单位
                                    
家庭住址
                                    

                                    

                                
                                

                                                
                                            
@enStuFam.Name 
                                            
@enStuFam.RelationShip
                                            
@enStuFam.Age
                                            
@enStuFam.PoliticalStatus
                                            
@enStuFam.TelNum 
                                            
@enStuFam.WorkUnit
                                            
@enStuFam.Address 
                                            

                                                Edit
                                            
                                            

                                                Delete
                                            
                                        
                            
                        
                    
                
            
            
        
    

版本三

1.样式      

卡片式表格：

添加/修改 弹出一个新页面：

2.代码

View代码：

 


                                    

                                        

                                            


                                                @*按钮*@
                                                



                                                      @*添加按钮*@
                                                
                                                    添加
                                                

                                                @*修改*@
                                                
                                                    修改
                                                

                                                @*删除*@
                                                @* 
                                                    删除
                                                *@

                                                
                                                    
                                                删除
                                                    
                                                

                                                


                                                

                                                            @* *@
                                                        

                                                    

                                                        

                                                            

                                                            
开始日期
                                                            
结束日期
                                                            
毕业学校
                                                            
证明教师
编  辑
                                                    
                                                




                                            
                                        
                                    

                                

Controller代码：

#region ShowEducation() 显示教育经历 王美 2015年6月5日
        /// 

        /// 显示教育经历
        /// 
        /// 教育经历Json
        public JsonResult ShowEducation()
        {
            //创建WCF接口
            IEduInfoService EduServiceShow = ServiceFactory.GetEduInfoService();
            //从缓存中获取身份证号
           string IdentityCardID = (String)MemcacheHelper.Get("IdentityCardID");           
            //调用WCF查询方法
            List listEduInfo = EduServiceShow.QueryEduInfo(IdentityCardID);
            //返回Json串
            return Json(listEduInfo, JsonRequestBehavior.AllowGet);
        }
#endregion

前两个版本代码资源链接

 

总结

做表格的过程乐趣无穷，也有过纠结、烦躁。最后绑定数据实现了查询，添加、修改、删除还在完善。慢慢的开始发现，有的时候我们不仅仅要享受过程，更要竭尽全力去争取一个好的结果。加油吧。