剑道 UI 网格批量编辑需要显示布尔值 true（复选框需要选中） false（复选框需要取消选中）

Posted 2023-05-07

【中文标题】剑道 UI 网格批量编辑需要显示布尔值 true（复选框需要选中） false（复选框需要取消选中）

【英文标题】：Kendo UI grid Batch Editing need to Display boolean value true(checkbox need to checked) false(checkbox need to uncheck)

【发布时间】：2015-02-10 18:34:36

【问题描述】：

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; 
 

Home 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

【参考方案1】：

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

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

【参考方案2】：

你可以使用这个 Telerik answer

或来自documentation：

columns.Bound(p => p.Enabled).ClientTemplate(
    "<input type='checkbox' value='#= ProductID #' " +
        "# if (Enabled)  #" +
            "checked='checked'" +
        "#  #" +
    "/>"
);