मेरे पास एक संग्रह है जिसे एक-एक करके तालिका के रूप में प्रदर्शित करने की आवश्यकता है। उदाहरण के लिए संग्रह 0 में इसमें 2 रिकॉर्ड की सूची हो सकती है और प्रत्येक रिकॉर्ड में 3 कॉलम हो सकते हैं। इसे तालिका 1 में प्रदर्शित करना होगा

संग्रह 1 में अगला इसमें 3 रिकॉर्ड की सूची हो सकती है और प्रत्येक रिकॉर्ड में 3 कॉलम हो सकते हैं- इसे तालिका 2 में प्रदर्शित करना होगा

यह संग्रह एक लूप में चल रहा है और मुझे संग्रह आइटम के आधार पर इसे दोहराना है:

नीचे दस्तक कोड है

function TestPageModel() {

    var self = this;
    self.MHxReport = ko.observableArray([]);

    function addMHxReport(columnList ) {
        return {
            ColumnList: ko.observableArray(columnList)            
        }
    }

    function add(term, mhstdat,mhendat) {
        return {            
            Term: ko.observable(term),
            Mhstdat: ko.observable(mhstdat),            
            Mhendat: ko.observable(mhendat)
        }
    }

    var cList = [];
    var columnList = [];
    var aList = [];

    cList.push(new add("cough", "13MAR2018", "10SEP2018"));
    cList.push(new add("ashtma", "13MAR2018", "06NOV2018"));

    aList.push(new add("blood", "13MAR2018", "10SEP2018"));
    aList.push(new add("ear", "13MAR2018", "10SEP2018"));
    aList.push(new add("head", "13MAR2018", "10SEP2018"));

    columnList[0] = cList;
    columnList[1] = aList;

    var newobj = new addMHxReport(columnList )
    self.MHxReport.push(newobj);
}

$(document).ready(function () {
    var testPageModel = new TestPageModel();    
    ko.applyBindings(TestPageModel);
});

नीचे एचटीएमएल कोड है

<div class="row" data-bind="foreach: MHxReport">
        <div style="margin:12px 0 12px 0;">
            <div class="col-sm-12 col-md-12 col-lg-12">             
                <div class="table-responsive dsg-btm-shadow" style="border: 1px solid #ccc;margin: 0 0 15px 0px;" >
                    <table class="dsg-setup dsg-aligntop" border="0" >
                        <tbody data-bind="foreach: ColumnList" >
                            <tr>
                                <td><span data-bind='text: $data'></span></td>
                            </tr>
                        </tbody>
                    </table>

                </div>           
            </div>
        </div>
    </div>  

समस्या यह है कि मैं इसे पंक्तियों और स्तंभों की तालिका के रूप में प्रदर्शित करने में सक्षम नहीं हूं। सुनिश्चित नहीं है कि क्या गुम है और कोड को पंक्तियों और स्तंभों में प्रदर्शित करने के लिए कैसे काम करना है। क्या कोई मदद कर सकता है। कृपया अग्रिम धन्यवाद

0
jaiganesh 19 नवम्बर 2018, 19:38

1 उत्तर

सबसे बढ़िया उत्तर

आपके कोड में, ColumnList सरणियों की एक सरणी है। तो, text: $data [object Object],[object Object] दिखाएगा। आपके प्रश्न के अनुसार, आप उन्हें कई तालिकाओं में प्रदर्शित करना चाहते हैं लेकिन आप एक ही तालिका बना रहे हैं। इसलिए, foreach: ColumnList को table भाग के बाहर ले जाएं।

function TestPageModel() {

  var self = this;
  self.MHxReport = ko.observableArray([]);

  function addMHxReport(columnList) {
    return {
      ColumnList: ko.observableArray(columnList)
    }
  }

  function add(term, mhstdat, mhendat) {
    return {
      Term: ko.observable(term),
      Mhstdat: ko.observable(mhstdat),
      Mhendat: ko.observable(mhendat)
    }
  }

  var cList = [];
  var columnList = [];
  var aList = [];

  cList.push(new add("cough", "13MAR2018", "10SEP2018"));
  cList.push(new add("ashtma", "13MAR2018", "06NOV2018"));

  aList.push(new add("blood", "13MAR2018", "10SEP2018"));
  aList.push(new add("ear", "13MAR2018", "10SEP2018"));
  aList.push(new add("head", "13MAR2018", "10SEP2018"));

  columnList.push(cList, aList)

  var newobj = new addMHxReport(columnList)
  self.MHxReport.push(newobj);
}

$(document).ready(function() {
  var testPageModel = new TestPageModel();
  ko.applyBindings(TestPageModel);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">

<div class="row" data-bind="foreach: MHxReport">
  <div style="margin:12px 0 12px 0;">
    <div class="col-sm-12 col-md-12 col-lg-12">
      <div class="table-responsive dsg-btm-shadow" data-bind="foreach: ColumnList">
      <span data-bind="text: 'table '+$index()"></span>
        <table class="dsg-setup dsg-aligntop table" style="padding:10px" border="0">
          <tbody data-bind="foreach: $data">
            <tr>
              <td><span data-bind='text: Term'></span></td>
              <td><span data-bind='text: Mhstdat'></span></td>
              <td><span data-bind='text: Mhendat'></span></td>
            </tr>
          </tbody>
        </table>
        <br> <br>
      </div>
    </div>
  </div>
</div>

इसका परीक्षण करने के लिए "रन कोड स्निपेट" पर क्लिक करें। यहां एक fiddle भी है।


अपडेट करें:

यदि आप पहले से कॉलम नामों के बारे में अनिश्चित हैं और उन्हें ऑब्जेक्ट से प्राप्त करना चाहते हैं, तो आप प्रत्येक ऑब्जेक्ट के keys और फिर उस कुंजी के लिए value को td से बाइंड करें। इस कदर:

function TestPageModel() {

  var self = this;
  self.MHxReport = ko.observableArray([]);

  function addMHxReport(columnList) {
    return {
      ColumnList: ko.observableArray(columnList)
    }
  }

  function add(term, mhstdat, mhendat) {
    return {
      Term: ko.observable(term),
      Mhstdat: ko.observable(mhstdat),
      Mhendat: ko.observable(mhendat)
    }
  }

  var columnList = [];
  var cList = [];

  cList.push(new add("cough", "13MAR2018", "10SEP2018"));
  cList.push(new add("ashtma", "13MAR2018", "06NOV2018"));

  // Has five columns
  var aList = [{
      Term: ko.observable("eyes"),
      Diagnosis:ko.observable("surgery"),
      Type:ko.observable("Major"),
      Mhstdat: ko.observable("19NOV2018"),
      Mhendat: ko.observable("20NOV2018"),
    },
    {
      Term: ko.observable("hands"),
      Diagnosis:ko.observable("transplant"),
      Type:ko.observable("Critical"),
      Mhstdat: ko.observable("21NOV2018"),
      Mhendat: ko.observable("22NOV2018"),
    }
  ];

  columnList.push(cList, aList)

  var newobj = new addMHxReport(columnList)
  self.MHxReport.push(newobj);
}

$(document).ready(function() {
  var testPageModel = new TestPageModel();
  ko.applyBindings(TestPageModel);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">

<div class="row" data-bind="foreach: MHxReport">
  <div style="margin:12px 0 12px 0;">
    <div class="col-sm-12 col-md-12 col-lg-12">
      <div class="table-responsive dsg-btm-shadow" data-bind="foreach: ColumnList">
        <span data-bind="text: 'table '+$index()"></span>
        <table class="dsg-setup dsg-aligntop table" style="padding:10px" border="0">
          <tbody data-bind="foreach: $data">
            <tr data-bind="foreach: { data: Object.keys($data), as: 'key' }">
              <td><span data-bind='text: $parent[key]'></span></td>
            </tr>
          </tbody>
        </table>
        <br> <br>
      </div>
    </div>
  </div>
</div>
1
adiga 20 नवम्बर 2018, 06:18