कोणीय जेएस + टाइपस्क्रिप्ट: गतिशील तालिका कैसे बनाएं

Question

मैं टाइपस्क्रिप्ट और कोणीय के लिए नया हूं। मैंने टाइपस्क्रिप्ट और कोणीय जेएस का उपयोग करके एक मॉड्यूल लागू किया है। जिसमें मैं एक ऐसी गतिशील तालिका जो प्रस्तुति के प्रकार के लाने और उसके अनुसार पहले मैं सी # .मेरा सी # कोड में किया है के रूप में मेरे विचार करने के लिए जोड़ देंगे, मैं नीचे दे दिया है बनाने की जरूरत:

private void ShowCustomFields() 
    { 
     Customer.CustomerController control = new Customer.CustomerController(); 

     DataTable fields = control.GetCustomFields(); 
     TableRow row = new TableRow(); 
     Int16 count = 0; 
     foreach (DataRow dr in fields.Rows) 
     { 
      count++; 
      string id = dr["Id"].ToString(); 
      string name = dr["Name"].ToString(); 
      string type = dr["Type"].ToString(); 
      string val = ""; 
      //Determine if the user can view/edit this custom field 

      bool canEdit = false; 
      if (Permissions.PermissionController.HasPermission(this.UserInfo.Username, "Custom Fields - Customer", 
       dr["Name"].ToString(), 
      Permissions.PermissionLevels.Edit)) 
      { 

       canEdit = true; 
      } 


      TableCell cellId = new TableCell(); 
      cellId.Visible = false; 
      cellId.EnableViewState = true; 
      cellId.Text = id; 

      TableCell cellName = new TableCell(); 
      cellName.Text = name + ": "; 
      cellName.Width = 150; 
      cellName.EnableViewState = true; 

      TableCell cellControl = new TableCell(); 
      cellControl.EnableViewState = true; 

      TextBox tb = new TextBox(); 
      if (!canEdit) 
      { 
       tb.Enabled = false; 
      } 
      tb.TabIndex = (Int16)(1000 + count); 

      RangeValidator r = new RangeValidator(); 
      switch (type) 
      { 
       case "Text": 

        tb.Text = val; 
        tb.ID = "CustomField" + id; 
        tb.EnableViewState = true; 
        tb.CssClass = "NormalTextBox"; 
        cellControl.Controls.Add(tb); 
        break; 
       case "Integer": 

        tb.Text = val; 
        tb.ID = "CustomField" + id; 
        tb.EnableViewState = true; 
        tb.CssClass = "NormalTextBox"; 
        cellControl.Controls.Add(tb); 

        r.ControlToValidate = tb.UniqueID; 
        r.Type = ValidationDataType.Integer; 
        r.MinimumValue = Int32.MinValue.ToString(); 
        r.MaximumValue = Int32.MaxValue.ToString(); 
        r.ErrorMessage = "Invalid Integer"; 
        cellControl.Controls.Add(r); 
        break; 
       case "Decimal": 

        tb.Text = val; 
        tb.ID = "CustomField" + id; 
        tb.EnableViewState = true; 
        tb.CssClass = "NormalTextBox"; 
        cellControl.Controls.Add(tb); 

        r.ControlToValidate = tb.UniqueID; 
        r.Type = ValidationDataType.Double; 
        r.MinimumValue = "-1000000000000"; 
        r.MaximumValue = "1000000000000"; 
        r.ErrorMessage = "Invalid Decimal"; 
        cellControl.Controls.Add(r); 
        break; 
       case "Date": 

        tb.Text = val; 
        tb.ID = "CustomField" + id; 
        tb.EnableViewState = true; 
        tb.CssClass = "NormalTextBox"; 
        cellControl.Controls.Add(tb); 

        r.ControlToValidate = tb.UniqueID; 
        r.Type = ValidationDataType.Date; 
        r.MinimumValue = "1/1/1900"; 
        r.MaximumValue = "12/31/3000"; 
        r.ErrorMessage = "Invalid Date"; 
        cellControl.Controls.Add(r); 
        break; 
       case "TrueFalse": 
        CheckBox cb = new CheckBox(); 
        if (val.ToUpper().Equals("TRUE")) 
        { 
         cb.Checked = true; 
        } 
        cb.EnableViewState = true; 
        cb.CssClass = "NormalTextBox"; 
        cb.TabIndex = (Int16)(1000 + count); 
        cellControl.Controls.Add(cb); 

        break; 
       case "DropdownList": 
        DropDownList ddl = new DropDownList(); 
        Vbos.Maintenance.MaintenanceController mcon = new Vbos.Maintenance.MaintenanceController(); 
        ddl.DataSource = mcon.GetTypeItems("CF_" + name); 
        ddl.DataTextField = "Description"; 
        ddl.DataValueField = "ShortDescription"; 
        ddl.DataBind(); 

        ListItem li = new ListItem(); 
        li.Text = "--Select--"; 
        li.Value = "-1"; 
        li.Selected = true; 

        ddl.Items.Insert(0, li); 
        if (ddl.Items.FindByValue(val) != null) 
        { 
         ddl.SelectedIndex = -1; 
         ddl.Items.FindByValue(val).Selected = true; 
        } 
        cellControl.Controls.Add(ddl); 
        break; 
      } 

      row.Cells.Add(cellId); 
      row.Cells.Add(cellName); 
      row.Cells.Add(cellControl); 
      row.EnableViewState = true; 
      tableCustomFields.Rows.Add(row); 
      //if(count%2 == 0) 
      //{ 
      row = new TableRow(); 
      //} 
      tableCustomFields.EnableViewState = true; 
     } 
    } 

आप मैं देख सकते हैं प्रकार के आधार पर डेटा ला सकता है। मैं कोणीय जेएस का उपयोग करके इसे कैसे कार्यान्वित कर सकता हूं और जानना चाहता हूं कि मैं इन मानों को अपने एनजी-मॉडल के साथ कैसे बांध सकता हूं।

Answer 1

कोणीय के साथ आप uiGrid जैसे @Dean वार्ड (यह डीन कैसे चल रहा है?) जैसे मॉड्यूल का उपयोग कर सकते हैं। या आप इसे स्वयं कर सकते हैं।

आपके सी # कोड का मांस अनिवार्य है और कुछ फैशन में टाइपस्क्रिप्ट में इसका अनुवाद किया जा सकता है। हालांकि इसकी सिफारिश नहीं की जाएगी। मौजूदा कोणीय निर्देशों का उपयोग करके घोषणात्मक तरीके से अधिकांश वास्तविक डेटा संचालित टेबल बिल्डिंग की जा सकती है।

आपके कोड का दिल सेल को अपने प्रकार के आधार पर प्रदर्शित करता है। इसे एक साधारण रैपर निर्देश के रूप में कार्यान्वित किया जा सकता है जो उचित प्रकार के लिए निर्देश के साथ खुद को प्रतिस्थापित करेगा।

प्रत्येक सेल प्रकार के लिए आप एक कस्टम निर्देश बना सकते हैं: पूर्णांक-सेल, दशमलव-सेल, ड्रॉपडाउन-सेल, बूलियन-सेल ... प्रत्येक सेल को प्रदर्शित करता है और नियंत्रण को किस प्रकार प्रस्तुत किया जाता है।

फिर आप प्रत्येक कॉलम और पंक्ति के लिए एनजी-दोहराने का उपयोग करने में सक्षम होंगे, और रैपर निर्देश को कस्टम प्रकार निर्देश के साथ स्वयं को प्रतिस्थापित करने दें।

इस दृष्टिकोण का एक अन्य लाभ यह है कि आपके पास चिंताओं का बेहतर अलगाव है, खुले/बंद सिद्धांत का पालन करता है और आपके घटक केवल एक ही काम करेंगे।

यदि रैपर निर्देश प्रकार के निर्देशों को प्रदर्शित करने के लिए एक सम्मेलन का उपयोग करता है, तो आप किसी मौजूदा घटक को खोलने की आवश्यकता के बिना भविष्य में नए प्रकार जोड़ सकते हैं।

यह कोणीय के लिए नए व्यक्ति के लिए बहुत काम है। मैं @ डीन वार्ड के सुझाव के साथ जाऊंगा। कोणीय के लिए बहुत से संपादन योग्य ग्रिड समाधान हैं। यदि uiGrid आपकी आवश्यकताओं के अनुरूप नहीं है, तो अन्य मौजूदा घटकों को देखें।

अद्यतन कुछ उदाहरण

आपका सबसे अच्छा शर्त अभी भी uiGrid की तरह एक मौजूदा ग्रिड घटक का उपयोग करने, है। यदि आप इसे स्वयं लिखना चाहते हैं, जिसे मैं अनुशंसा नहीं करता - यह ऐसा करने का एक तरीका होगा।

function cellInteger(): ng.IDirective { 
    return { 
     scope: {data: '='}, 
     controller: 'CellIntegerController', 
     controllerAs: 'vm', 
     bindToController, 
     templateUrl: 'path/to/integer.html' 
    } 
} 
gridMobule.directive('cellInteger', cellInteger); 

export class CellIntegerController { 

    public data: CellDataType; 

    constructor() {} 

    save(value: number) { 
     this.data.value = number; 
    } 
} 
gridModule.controller('CellIntegerController', CellIntegerController); 

इस के लिए आप की तरह कुछ होता

आपके विचार में:

<input 
    type="number" 
    class="cell-integer" 
    ng-model="vm.data.value" 
    ng-blur="save(vm.data.value)" 
</