Условный столбец с кнопкой в ​​сетке javascript .net core - PullRequest
Новая
       32

Условный столбец с кнопкой в ​​сетке javascript .net core

0 голосов
/ 26 февраля 2019

Я пытаюсь включить столбец с условными в моей таблице: 

 $("#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>'

Действительно, у меня есть переменная Rest (reste of payment) в моей таблице ServicesOrder, моя цель - отобразить один издве колонки: 

if (rest==0) display --> { headerText: 'Finish', template: '<a class="btn btn-sucess" >Finish</a>'
Else display --> { headerText: 'In progress', template: '<a class="btn btn-danger" >In progress</a>'

Заранее спасибо

Ответы [ 2 ]

0 голосов
/ 27 февраля 2019

Из вашего запроса мы понимаем, что вам нужно отобразить любую из двух кнопок на основе значения из источника данных.Мы выполнили ваше требование, используя функцию 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

0 голосов
/ 27 февраля 2019

Краткий ответ: создайте шаблон, как показано ниже: 

    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>";

Демонстрация:

enter image description here

Полный код: 

        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>
...