asp.net-mvc-4 - Kendo UI 网格批量编辑需要显示 bool 值 true(复选框需要选中) false(复选框需要取消选中)

Question

Employee.cs 类就是这样

 public class Employee
 {
     public int EmployeeID;
     public string Name;
 }

类 Order.cs 就是这样

 public class Order
 {
     public int OrderID { get; set; }
     public DateTime OrderDate { get; set; }
     public string OrderDescription { get; set; }
     public int EmployeeID { get; set; }
     public bool checker { get; set; }
     public bool Maker { get; set; }
     public bool Supervisor { get; set; }
 }

家庭 Controller 就是这样

 public class HomeController : Controller
 {
     public static List<Order> orderList = new List<Order> { 
             new Order {OrderID = 1, OrderDate = new DateTime(2012,8,1), EmployeeID = 1, OrderDescription = "Order Food",checker=true,Maker=true,Supervisor=true },
             new Order {OrderID = 2, OrderDate = new DateTime(2012,8,1), EmployeeID = 2, OrderDescription = "Order Office Materials",checker=false,Maker=true,Supervisor=true },
             new Order {OrderID = 3, OrderDate = new DateTime(2012,8,2), EmployeeID = 1, OrderDescription = "Order Production Materials",checker=true,Maker=true,Supervisor=true },
             new Order {OrderID = 4, OrderDate = new DateTime(2012,8,3), EmployeeID = 4, OrderDescription = "Order Food",checker=true,Maker=true,Supervisor=true },
             new Order {OrderID = 5, OrderDate = new DateTime(2012,8,4), EmployeeID = 3, OrderDescription = "Order Production Materials" ,checker=false,Maker=true,Supervisor=true},
             new Order {OrderID = 6, OrderDate = new DateTime(2012,8,5), EmployeeID = 3, OrderDescription = "Order Production Materials" ,checker=true,Maker=true,Supervisor=true},
             new Order {OrderID = 7, OrderDate = new DateTime(2012,8,5), EmployeeID = 4, OrderDescription = "Order Food", checker=true,Maker=true,Supervisor=true},
             new Order {OrderID = 8, OrderDate = new DateTime(2012,8,6), EmployeeID = 1, OrderDescription = "Order Food", checker=true,Maker=true,Supervisor=true},
             new Order {OrderID = 9, OrderDate = new DateTime(2012,8,6), EmployeeID = 1, OrderDescription = "Order Office Materials" ,checker=false,Maker=true,Supervisor=true},
             new Order {OrderID = 10, OrderDate = new DateTime(2012,8,7), EmployeeID = 2, OrderDescription = "Order Production Materials",checker=true,Maker=true,Supervisor=true },
         };

     public static List<Employee> employeeList = new List<Employee> { 
         new Employee {EmployeeID = 1, Name = "Anrew"},
         new Employee {EmployeeID = 2, Name = "John"},
         new Employee {EmployeeID = 3, Name = "Peter"},
         new Employee {EmployeeID = 4, Name = "Ivan"},
         new Employee {EmployeeID = 5, Name = "Nancy"},
     };

     public ActionResult Index()
     {
         ViewData["employees"] = employeeList.Select(e => new  {
                         EmployeeID = e.EmployeeID,
                         Name = e.Name
                     });

         return View();
     }


     public ActionResult About()
     {
         return View();
     }


     public ActionResult Read([DataSourceRequest] DataSourceRequest request)
     {
         var allOrders = from orders in orderList
                      select new Order{
                         OrderID = orders.OrderID,
                         OrderDate = orders.OrderDate,
                         EmployeeID = orders.EmployeeID,
                         OrderDescription = orders.OrderDescription,
                         checker=orders.checker,
                         Maker=orders.Maker
                      };

         return Json(allOrders.ToDataSourceResult(request));
     }

     public ActionResult Delete([DataSourceRequest] DataSourceRequest request, Order order)
     {
         if (order != null && ModelState.IsValid)
         {
             var target = orderList.Where(o => o.OrderID == order.OrderID).FirstOrDefault();

             if (target != null)
             {
                 orderList.Remove(target);
             }
         }

         return Json(ModelState.ToDataSourceResult());
     }

     [AcceptVerbs(HttpVerbs.Post)]
     public ActionResult Update([DataSourceRequest] DataSourceRequest request, Order order)
     {
         if (order != null && ModelState.IsValid)
         {

             var target = orderList.Where(o => o.OrderID == order.OrderID).FirstOrDefault();

             if (target != null)
             {
                 int targetIndex = orderList.IndexOf(target);
                 orderList[targetIndex].OrderDate = order.OrderDate;
                 orderList[targetIndex].EmployeeID = order.EmployeeID;
                 orderList[targetIndex].OrderDescription = order.OrderDescription;
                 orderList[targetIndex].checker = order.checker;
                 orderList[targetIndex].Maker = order.Maker;
                 orderList[targetIndex].Supervisor = order.Supervisor;
             }
         }

         return Json(ModelState.ToDataSourceResult());
     }

     public ActionResult Create([DataSourceRequest] DataSourceRequest request, Order order)
     {
             order.OrderID = orderList[orderList.Count - 1].OrderID + 1;
             orderList.Add(order);

             return Json(new[] { order }.ToDataSourceResult(request, ModelState));
     }

     public ActionResult UpdateCreateDelete(
         [Bind(Prefix = "updated")]List<Order> updatedOrders,
         [Bind(Prefix = "new")]List<Order> newOrders,
         [Bind(Prefix = "deleted")]List<Order> deletedOrders)
     {
         if (updatedOrders != null && updatedOrders.Count > 0)
         {
             for (int i = 0; i < updatedOrders.Count; i++)
             {
                 var target = orderList.Where(o => o.OrderID == updatedOrders[i].OrderID).FirstOrDefault();

                 if (target != null)
                 {
                     int targetIndex = orderList.IndexOf(target);
                     orderList[targetIndex].OrderDate = updatedOrders[i].OrderDate;
                     orderList[targetIndex].EmployeeID = updatedOrders[i].EmployeeID;
                     orderList[targetIndex].OrderDescription = updatedOrders[i].OrderDescription;
                     orderList[targetIndex].checker = updatedOrders[i].checker;
                     orderList[targetIndex].Supervisor = updatedOrders[i].Supervisor;
                     orderList[targetIndex].Maker = updatedOrders[i].Maker;
                 }
             }
         }

         if (newOrders != null && newOrders.Count > 0)
         {
             for (int i = 0; i < newOrders.Count; i++)
             {
                 newOrders[i].OrderID = orderList[orderList.Count - 1].OrderID + 1;
                 orderList.Add(newOrders[i]);
             }

         }

         if (deletedOrders != null && deletedOrders.Count > 0)
         {
             for (int i = 0; i < deletedOrders.Count; i++)
             {
                 var target = orderList.Where(o => o.OrderID == deletedOrders[i].OrderID).FirstOrDefault();

                 if (target != null)
                 {
                     orderList.Remove(target);
                 }
             }
         }

         return Json("Success!");
     } 

html页面Index.cshtml就是这样

@(Html.Kendo().Grid<GridSyncChangesWithOneRequest.Models.Order>()
 .Name("Grid")    
 .Columns(columns => {        
     columns.Bound(p => p.OrderID);
     columns.ForeignKey(p => p.EmployeeID,(System.Collections.IEnumerable)ViewData["employees"], "EmployeeID", "Name");
     columns.Bound(p => p.OrderDescription);
     columns.Bound(p => p.Maker);
     columns.Bound(p => p.checker);
     //columns.Bound(p => p.checker).HeaderTemplate("Checker").ClientTemplate("<input type='checkbox' id='#= ID#,#= Name#' class='grid_checkbox'/>");      
     columns.Bound(p => p.Supervisor); 
     columns.Bound(p => p.OrderDate).Format("{0:d}");
     columns.Command(c => {
         c.Destroy();
     });
 })    
 .ToolBar(toolBar => toolBar.Create())
 .Editable(editable => editable.Mode(GridEditMode.InCell))
 .Pageable()
 .Sortable()
 .Scrollable()
 .Filterable()
 .DataSource(dataSource => dataSource        
     .Ajax()      
     .ServerOperation(false)
     .Model(model => { 
         model.Id(p => p.OrderID);
         model.Field(p => p.OrderDescription).Editable(false);
         model.Field(p => p.EmployeeID).Editable(false);
         model.Field(p => p.OrderID).Editable(false);
         model.Field(p => p.Maker).Editable(false).DefaultValue(true);           
         model.Field(p => p.OrderDate).Editable(false);               
     })
     .Create(create => create.Action("Create", "Home"))
     .Destroy(destroy => destroy.Action("Delete", "Home"))
     .Read(read => read.Action("Read", "Home"))
     .Update(update => update.Action("Update", "Home"))       
 ) )

按下 saveChanges 会将所有当前更改发送到服务器:

<button onclick="sendData()">Save Changes</button>

<script>  
 function sendData() {
     var grid = $("#Grid").data("kendoGrid"),
         parameterMap = grid.dataSource.transport.parameterMap;

     //get the new and the updated records
     var currentData = grid.dataSource.data();
     var updatedRecords = [];
     var newRecords = [];

     for (var i = 0; i < currentData.length; i++) {
         if (currentData[i].isNew()) {
             //this record is new
             newRecords.push(currentData[i].toJSON());
         } else if(currentData[i].dirty) {         
             updatedRecords.push(currentData[i].toJSON());
         }
     }

     //this records are deleted
     var deletedRecords = [];
     for (var i = 0; i < grid.dataSource._destroyed.length; i++) {
         deletedRecords.push(grid.dataSource._destroyed[i].toJSON());
     }

     var data = {};
     $.extend(data, parameterMap({ updated: updatedRecords }), parameterMap({ deleted: deletedRecords }), parameterMap({ new: newRecords }));

     $.ajax({
         url: "/Home/UpdateCreateDelete",
         data: data,
         type: "POST",
         error: function () {
             //Handle the server errors using the approach from the previous example
         },
         success: function () {
            alert("update on server is completed");

             grid.dataSource._destroyed = [];
            //refresh the grid - optional
             grid.dataSource.read();
         }
     })
 } </script>

我只需要显示 checkBox 而不是 True of False 编辑。有什么可能的解决方案吗？ ! enter image description here

Answer 1

在客户端模板中检查检查字段的真假

columns.Bound(p=> p.checker).ClientTemplate("# if(checker==true){#" + "<input  type='checkbox'  checked='checked'  />" + "#}else{#" + "<input type='checkbox' />" + "#}#");