Question

我试图在我的网格中包括一个带有条件的列：

interv

实际上，我的表ServicesOrder中有一个变量Rest（付款余额），我的目标是显示两列之一：

 $("#Grid").ejGrid({
                dataSource: ej.DataManager({
               .
    columns: [
             .
             .
      { headerText: 'Detail', template: '<a class="btn btn-info" href="/ServicesOrder/Detail/{{:ServicesOrderId}}">Detail</a>' },

{ headerText: 'Finish', template: '<a class="btn btn-sucess" >Finish</a>'
{ headerText: 'In progress', template: '<a class="btn btn-danger" >In progress</a>'

提前谢谢

Answer 1

简短答案： 创建如下模板：

    var detailTemplate = 
        "<a class='btn btn-info' rel='nofollow' rel='nofollow' href='/ServicesOrder/Detail/{{:ServicesOrderId}}'>Detail</a>"
        + ","
        + "<a class='btn {{:Rest==0 ?'btn-success':'btn-danger' }}'>"
        + "{{:Rest==0?'Finish':'In progress' }}"
        + "</a>";

演示：

完整代码：

        var gridData = [
            {ServicesOrderId: 'SO-A1-001', Note:'test note 1' , Rest:0, },
            {ServicesOrderId: 'SO-A1-002', Note:'test note 2' , Rest:1, },
            {ServicesOrderId: 'SO-A1-003', Note:'test note 3' , Rest:3, },
            {ServicesOrderId: 'SO-A1-004', Note:'test note 4' , Rest:0, },
            {ServicesOrderId: 'SO-A1-005', Note:'test note 5' , Rest:6, },
            {ServicesOrderId: 'SO-A1-006', Note:'test note 6' , Rest:2, },
            {ServicesOrderId: 'SO-A1-007', Note:'test note 7' , Rest:0, },
            {ServicesOrderId: 'SO-A1-008', Note:'test note 8' , Rest:0, },
            {ServicesOrderId: 'SO-A1-009', Note:'test note 9' , Rest:1, },
            {ServicesOrderId: 'SO-A1-010', Note:'test note 10' , Rest:2, },
            {ServicesOrderId: 'SO-B1-001', Note:'test note 1' , Rest:0, },
            {ServicesOrderId: 'SO-B1-002', Note:'test note 2' , Rest:1, },
            {ServicesOrderId: 'SO-B1-003', Note:'test note 3' , Rest:3, },
            {ServicesOrderId: 'SO-B1-004', Note:'test note 4' , Rest:0, },
            {ServicesOrderId: 'SO-B1-005', Note:'test note 5' , Rest:6, },
            {ServicesOrderId: 'SO-B1-006', Note:'test note 6' , Rest:2, },
            {ServicesOrderId: 'SO-B1-007', Note:'test note 7' , Rest:0, },
            {ServicesOrderId: 'SO-B1-008', Note:'test note 8' , Rest:0, },
            {ServicesOrderId: 'SO-B1-009', Note:'test note 9' , Rest:1, },
            {ServicesOrderId: 'SO-B1-010', Note:'test note 10' , Rest:2, },
        ];

    var detailTemplate = 
        "<a class='btn btn-info' rel='nofollow' rel='nofollow' href='/ServicesOrder/Detail/{{:ServicesOrderId}}'>Detail</a>"
        + ","
        + "<a class='btn {{:Rest==0 ?'btn-success':'btn-danger' }}'>"
        + "{{:Rest==0?'Finish':'In progress' }}"
        + "</a>";

    $("#Grid").ejGrid({            
        dataSource: window.gridData,
        allowPaging: true,  
        
        columns: [
            { field: "ServicesOrderId", isPrimaryKey: true, headerText: "Order ID" , textAlign: ej.TextAlign.Right, width: 90  },
            { field: "Note", headerText: 'Note', width: 90 },
            { 
                headerText: 'Detail', 
                template:  detailTemplate,
            },
        ]	
    });

    <link rel="stylesheet" href="http://cdn.syncfusion.com/13.2.0.34/js/web/flat-azure/ej.web.all.min.css" />
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
    <script src="http://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>
    <script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
    <script src="http://cdn.syncfusion.com/13.2.0.34/js/web/ej.web.all.min.js"> </script>
    
    <div style="padding:10px">
        <div id="Grid"></div>
    </div>

Answer 2

根据您的查询，我们了解到您需要根据数据源中的值呈现两个按钮中的任何一个。我们使用columnTemplate功能和JS渲染（如果有其他条件）满足了您的要求。

请参考以下代码示例

  `<script type="text/x-jsrender" id="columnTemplate">
        {{if Verified}}
  <a class="btn btn-sucess">Finish</a>
        {{else}}
 <a class="btn btn-danger">In progress</a>
        {{/if}}   
    </script>
    <div id="Grid"></div>
    <script type="text/javascript">
        $(function () {
            $("#Grid").ejGrid({
                // the datasource "window.employeeView" is referred from jsondata.min.js
                dataSource: window.gridData,
                allowPaging: true,
                pageSettings: { pageSize: 4 },
                columns: [
                    { field: "OrderID", headerText: "Order ID", isPrimaryKey: true, textAlign: ej.TextAlign.Right, width: 90 },
                    { field: "CustomerID", headerText: "Customer ID", width: 150 },
                    { field: "EmployeeID", headerText: "Employee ID", textAlign: ej.TextAlign.Right, width: 100 },
                    { field: "OrderDate", headerText: "Order Date", textAlign: ej.TextAlign.Right, width: 100, format: "{0:MM/dd/yyyy}" },
                    { field: "Freight", headerText: "Freight", textAlign: ej.TextAlign.Right, format: "{0:C}" },
                    { field: "Verified", headerText: "Verified", width: 100 },
                    { headerText: "Employee Image", template: "#columnTemplate", textAlign: "center", width: 110 },
                ]
            });
        });
    </script>`

请参考以下示例

示例：https://jsplayground.syncfusion.com/gvr2gkym

请参阅帮助文档以供参考

https://help.syncfusion.com/js/grid/columns#column-template

https://www.jsviews.com/#iftag

网格javascript .net Core中带有按钮的条件列

2 个答案: