级联组合框与html表作为数据源

时间：2017-01-12 13:21:06

标签： jquery html infragistics ignite-ui igcombo

我有一些代码用于过滤一些用户选择但是我想使用现有的html表作为igcombo框的数据源而不是javascript数组。我怎么能做到这一点？ 这是我的代码：

＆＃13;
＆＃13; 
<html>
<head>
  <script src="http://igniteui.com/js/modernizr.min.js"></script>
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
  <script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
  <script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
  <link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
  <link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
  <style>
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}
</style>
  <script>
    $(function() {
      var dsCountry, dsCascTowns, dsCountryCascading,
        dsCountryCascading, dsStatesUSCascading, dsDistrictBGCascading;

      dsCountry = [{
        txtCountry: "3Delta Level 3",
        valCountry: "Ta"
      }, {
        txtCountry: "Account Updater",
        valCountry: "Au"
      }, {
        txtCountry: "DCC",
        valCountry: "Dc"
      }];

      dsCascDistrict = [{
        keyCountry: "Ta",
        txtDistrict: "ALL",
        valDistrict: "AL"
      }, {
        keyCountry: "Ta",
        txtDistrict: "3336",
        valDistrict: "3336"
      }, {
        keyCountry: "Ta",
        txtDistrict: "6064",
        valDistrict: "6064"
      }, {
        keyCountry: "Ta",
        txtDistrict: "6980",
        valDistrict: "6980"
      }, {
        keyCountry: "Ta",
        txtDistrict: "6081",
        valDistrict: "6081"
      }, {
        keyCountry: "Au",
        txtDistrict: "ALL",
        valDistrict: "AL"
      }, {
        keyCountry: "Au",
        txtDistrict: "3345",
        valDistrict: "3345"
      }, {
        keyCountry: "Au",
        txtDistrict: "3346",
        valDistrict: "3346"
      }, {
        keyCountry: "Au",
        txtDistrict: "6214",
        valDistrict: "6214"
      }, {
        keyCountry: "Dc",
        txtDistrict: "ALL",
        valDistrict: "AL"
      }, {
        keyCountry: "Dc",
        txtDistrict: "40",
        valDistrict: "40"
      }];

      dsCascTowns = [{
        keyDistrict: "NJ",
        textTown: "Atlantic City",
        valTown: "AtlanticCity"
      }, {
        keyDistrict: "NJ",
        textTown: "Dover",
        valTown: "Dover"
      }, {
        keyDistrict: "CA",
        textTown: "Los Angeles",
        valTown: "LosAngeles"
      }, {
        keyDistrict: "CA",
        textTown: "San Francisco",
        valTown: "San Francisco"
      }, {
        keyDistrict: "CA",
        textTown: "San Diego",
        valTown: "SanDiego"
      }, {
        keyDistrict: "IL",
        textTown: "Chicago",
        valTown: "Chicago"
      }, {
        keyDistrict: "NY",
        textTown: "New York",
        valTown: "NewYork"
      }, {
        keyDistrict: "NY",
        textTown: "Buffalo",
        valTown: "Buffalo"
      }, {
        keyDistrict: "FL",
        textTown: "Miami",
        valTown: " Miami"
      }, {
        keyDistrict: "FL",
        textTown: "Orlando",
        valTown: "Orlando"
      }, {
        keyDistrict: "SA",
        textTown: "Sofia",
        valTown: "Sofia"
      }, {
        keyDistrict: "SA",
        textTown: "Pernik",
        valTown: "Pernik"
      }, {
        keyDistrict: "PV",
        textTown: "Plovdiv",
        valTown: "Plovdiv"
      }, {
        keyDistrict: "PV",
        textTown: "Asenovgrad",
        valTown: "Asenovgrad"
      }, {
        keyDistrict: "V",
        textTown: "Varna",
        valTown: "Varna"
      }, {
        keyDistrict: "V",
        textTown: "Kavarna",
        valTown: "Kavarna"
      }, {
        keyDistrict: "V",
        textTown: "Balchik",
        valTown: "Balchik"
      }, {
        keyDistrict: "Y",
        textTown: "Yambol",
        valTown: "Yambol"
      }, {
        keyDistrict: "Y",
        textTown: "Kermen",
        valTown: "Kermen"
      }, {
        keyDistrict: "Y",
        textTown: "Elhovo",
        valTown: "Elhovo"
      }, {
        keyDistrict: "Y",
        textTown: "Bolyarovo",
        valTown: "Bolqrovo"
      }, ];

      $(function() {

        $("#comboCountry").igCombo({
          textKey: "txtCountry",
          valueKey: "valCountry",
          dataSource: dsCountry,
          selectionChanged: function(evt, ui) {
            var filteredCascDistrict = [];
            if (ui.items && ui.items[0]) {
              var itemData = ui.items[0].data;
              if (itemData.valCountry == "US") {
                $("#state").css("display", "none");
                $("#district").css("display", "block");
              } else {
                $("#state").css("display", "none");
                $("#district").css("display", "block");
              }

              filteredCascDistrict = dsCascDistrict.filter(function(district) {
                return district.keyCountry == itemData.valCountry;
              });
            }

            var $comboDistrict = $("#comboDistrict");
            $comboDistrict.igCombo("deselectAll", {}, true);
            $comboDistrict.igCombo("option", "dataSource", filteredCascDistrict);
            $comboDistrict.igCombo("dataBind");

            var disableChildCombo = filteredCascDistrict.length == 0;
            $comboDistrict.igCombo("option", "disabled", disableChildCombo);
          },
          itemsRendered: function(evt, ui) {
            ui.owner.deselectAll();
          }
        });

        $("#comboDistrict").igCombo({
          valueKey: "valDistrict",
          textKey: "txtDistrict",
          dataSource: [],
          disabled: true,
          filteringCondition: "startsWith",
          multiSelection: {
            enabled: true
          },
          selectionChanged: function(evt, ui) {
            var filteredCascTown = [];

            if (ui.items && ui.items[0]) {
              var itemData = ui.items[0].data;

              var filteredCascTown = dsCascTowns.filter(function(town) {
                return town.keyDistrict == itemData.valDistrict;
              });
            }

            var $comboTown = $("#comboTown");
            $comboTown.igCombo("deselectAll");
            $comboTown.igCombo("option", "dataSource", filteredCascTown);
            $comboTown.igCombo("dataBind");

            var disableChildCombo = filteredCascTown.length == 0;
            $comboTown.igCombo("option", "disabled", disableChildCombo);
          }
        });

        $("#comboTown").igCombo({
          valueKey: "valTown",
          textKey: "textTown",
          disabled: true
        });
      });
    });
  </script>
</head>

<body>
<table border cellpadding="1">
	<tr>
		<td colspan="2">
			<table cellpadding="0" width="100%">
				<tr>
					<td>PAGE 1</td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td valign="bottom">PRODUCT</td>
		<td align="right" valign="bottom">CHARGETYPE</td>
	</tr>
	<tr>
		<td>Google</td>
		<td align="right">5954</td>
	</tr>
	<tr>
		<td></td>
		<td align="right">5456</td>
	</tr>
	<tr>
		<td></td>
		<td align="right">9057</td>
	</tr>
	<tr>
		<td></td>
		<td align="right">5658</td>
	</tr>
	<td>Apple</td>
		<td align="right">5254</td>
	</tr>
	<tr>
		<td></td>
		<td align="right">5136</td>
	</tr>
	<tr>
		<td></td>
		<td align="right">6757</td>
	</tr>
	<tr>
		<td></td>
		<td align="right">6158</td>
	</tr>
	<td>Samsung</td>
		<td align="right">5884</td>
	</tr>
		<td></td>
		<td align="right">0096</td>
	</tr>
	<tr>
		<td></td>
		<td align="right">7777</td>
	</tr>
	<tr>
		<td></td>
		<td align="right">8181</td>
</table>
  <div class="group-container overHidden" id="before">
    <IFRAME class="frame" id=iframe1 name="iframe1" style="display: none" src="about:blank"></IFRAME>
    <form method="post" target="iframe1" action="SubmitToSomeFile" id="frm" accept-charset=UTF-8 name="frm">
      <div class="overHidden">
        <div class="comboGroup">
          <div>Product</div>
          <span id="comboCountry"></span>
        </div>
        <div class="comboGroup2">
          <div id="state">
            <br />
          </div>
          <div id="district">ChargeType</div>
          <span id="comboDistrict"></span>
        </div>
        <!-- <div class="comboGroup">
                <div>Town</div>
                <span id="comboTown"></span>
            </div> -->
      </div>
      <br>
      <br>
      <INPUT type="submit" class="button" name="submit" value="Run" id=button2 onClick="_submit_form();">
    </form>
    <!-- frame goes here -->
  </div>
  <div id="after" style="width:99%;border:gray 1px solid;display:none;background-color:#ccc;Padding:5px;height:100px;">Thank you</div>
  <!-- Some Content After the form. -->
  <script language="JavaScript">
    function _submit_form(){
    /**** To hide and display frame ****/
   /* document.getElementById('before').style.display = 'none'; */
  /* 	document.getElementById('after').style.display = 'block'; */
    var text1 = $("#comboCountry").igCombo("text");
    var text2 = $("#comboDistrict").igCombo("text");
	
	/* To handle text for one or multiple chargetypes */
    if (text2.indexOf(',') >= 0) {
    document.getElementById("after").innerHTML = "Your Product is " + text1 + "! Your ChargeTypes are " + text2;
} else {
    document.getElementById("after").innerHTML = "Your Product is " + text1 + "! Your ChargeType is " + text2;
    
}
	return true
}
  </script>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：1)

您无法将igCombo绑定到HTML表格。组合支持绑定的唯一DOM元素是HTML选择。但是，您可以创建一个新的$.ig.DataSource对象，将其绑定到HTML表，然后通过为其提供textKey和valueKey数据将其用作组合的数据源你希望它绑定到。这仍然无法实现级联方案，因为您需要将数据分成您想要用于其他组合的不同组，具体取决于第一个组合选择。

答案 1 :(得分：1)

我编辑了你的代码，这应该有效。

＆＃13;
＆＃13; 
var data = [];
request.on('data', function(chunck) {
  data.push(chunck);
}).on('end', function() {
  data = Buffer.concat(data).toString();
  response.send(JSON.parse(data));
}).on('error', function(error) {
  console.log(error);
  response.status(400).send(error);
});
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

您无法将igCombo绑定到HTML表，但您可以创建一个数组，其中包含igCombo所需的表和相同的规范，如下面的示例代码所示（查看comboTable和getProductForCombo） ）

<html>
<head>
  <script src="http://igniteui.com/js/modernizr.min.js"></script>
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
  <script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
  <script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
  <link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
  <link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
  <style>
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}
</style>
  <script>
    $(function() {
      var dsCountry, dsCascTowns, dsCountryCascading,
        dsCountryCascading, dsStatesUSCascading, dsDistrictBGCascading;

      dsCountry = [{
        txtCountry: "3Delta Level 3",
        valCountry: "Ta"
      }, {
        txtCountry: "Account Updater",
        valCountry: "Au"
      }, {
        txtCountry: "DCC",
        valCountry: "Dc"
      }];

      dsCascDistrict = [{
        keyCountry: "Ta",
        txtDistrict: "ALL",
        valDistrict: "AL"
      }, {
        keyCountry: "Ta",
        txtDistrict: "3336",
        valDistrict: "3336"
      }, {
        keyCountry: "Ta",
        txtDistrict: "6064",
        valDistrict: "6064"
      }, {
        keyCountry: "Ta",
        txtDistrict: "6980",
        valDistrict: "6980"
      }, {
        keyCountry: "Ta",
        txtDistrict: "6081",
        valDistrict: "6081"
      }, {
        keyCountry: "Au",
        txtDistrict: "ALL",
        valDistrict: "AL"
      }, {
        keyCountry: "Au",
        txtDistrict: "3345",
        valDistrict: "3345"
      }, {
        keyCountry: "Au",
        txtDistrict: "3346",
        valDistrict: "3346"
      }, {
        keyCountry: "Au",
        txtDistrict: "6214",
        valDistrict: "6214"
      }, {
        keyCountry: "Dc",
        txtDistrict: "ALL",
        valDistrict: "AL"
      }, {
        keyCountry: "Dc",
        txtDistrict: "40",
        valDistrict: "40"
      }];

      dsCascTowns = [{
        keyDistrict: "NJ",
        textTown: "Atlantic City",
        valTown: "AtlanticCity"
      }, {
        keyDistrict: "NJ",
        textTown: "Dover",
        valTown: "Dover"
      }, {
        keyDistrict: "CA",
        textTown: "Los Angeles",
        valTown: "LosAngeles"
      }, {
        keyDistrict: "CA",
        textTown: "San Francisco",
        valTown: "San Francisco"
      }, {
        keyDistrict: "CA",
        textTown: "San Diego",
        valTown: "SanDiego"
      }, {
        keyDistrict: "IL",
        textTown: "Chicago",
        valTown: "Chicago"
      }, {
        keyDistrict: "NY",
        textTown: "New York",
        valTown: "NewYork"
      }, {
        keyDistrict: "NY",
        textTown: "Buffalo",
        valTown: "Buffalo"
      }, {
        keyDistrict: "FL",
        textTown: "Miami",
        valTown: " Miami"
      }, {
        keyDistrict: "FL",
        textTown: "Orlando",
        valTown: "Orlando"
      }, {
        keyDistrict: "SA",
        textTown: "Sofia",
        valTown: "Sofia"
      }, {
        keyDistrict: "SA",
        textTown: "Pernik",
        valTown: "Pernik"
      }, {
        keyDistrict: "PV",
        textTown: "Plovdiv",
        valTown: "Plovdiv"
      }, {
        keyDistrict: "PV",
        textTown: "Asenovgrad",
        valTown: "Asenovgrad"
      }, {
        keyDistrict: "V",
        textTown: "Varna",
        valTown: "Varna"
      }, {
        keyDistrict: "V",
        textTown: "Kavarna",
        valTown: "Kavarna"
      }, {
        keyDistrict: "V",
        textTown: "Balchik",
        valTown: "Balchik"
      }, {
        keyDistrict: "Y",
        textTown: "Yambol",
        valTown: "Yambol"
      }, {
        keyDistrict: "Y",
        textTown: "Kermen",
        valTown: "Kermen"
      }, {
        keyDistrict: "Y",
        textTown: "Elhovo",
        valTown: "Elhovo"
      }, {
        keyDistrict: "Y",
        textTown: "Bolyarovo",
        valTown: "Bolqrovo"
      }, ];

      $(function() {

        $("#comboCountry").igCombo({
          textKey: "txtCountry",
          valueKey: "valCountry",
          dataSource: dsCountry,
          selectionChanged: function(evt, ui) {
            var filteredCascDistrict = [];
            if (ui.items && ui.items[0]) {
              var itemData = ui.items[0].data;
              if (itemData.valCountry == "US") {
                $("#state").css("display", "none");
                $("#district").css("display", "block");
              } else {
                $("#state").css("display", "none");
                $("#district").css("display", "block");
              }

              filteredCascDistrict = dsCascDistrict.filter(function(district) {
                return district.keyCountry == itemData.valCountry;
              });
            }

            var $comboDistrict = $("#comboDistrict");
            $comboDistrict.igCombo("deselectAll", {}, true);
            $comboDistrict.igCombo("option", "dataSource", filteredCascDistrict);
            $comboDistrict.igCombo("dataBind");

            var disableChildCombo = filteredCascDistrict.length == 0;
            $comboDistrict.igCombo("option", "disabled", disableChildCombo);
          },
          itemsRendered: function(evt, ui) {
            ui.owner.deselectAll();
          }
        });

        $("#comboDistrict").igCombo({
          valueKey: "valDistrict",
          textKey: "txtDistrict",
          dataSource: [],
          disabled: true,
          filteringCondition: "startsWith",
          multiSelection: {
            enabled: true
          },
          selectionChanged: function(evt, ui) {
            var filteredCascTown = [];

            if (ui.items && ui.items[0]) {
              var itemData = ui.items[0].data;

              var filteredCascTown = dsCascTowns.filter(function(town) {
                return town.keyDistrict == itemData.valDistrict;
              });
            }

            var $comboTown = $("#comboTown");
            $comboTown.igCombo("deselectAll");
            $comboTown.igCombo("option", "dataSource", filteredCascTown);
            $comboTown.igCombo("dataBind");

            var disableChildCombo = filteredCascTown.length == 0;
            $comboTown.igCombo("option", "disabled", disableChildCombo);
          }
        });

        $("#comboTown").igCombo({
          valueKey: "valTown",
          textKey: "textTown",
          disabled: true
        });



        $("#comboTable").igCombo({
        	valueKey: "value",
        	textKey: "value",
        	dataSource: getProductForCombo()
        });

        function getProductForCombo()
        {
        	var array_return = [];

        	$(".table__product td:nth-child(1)").each(function(){
        		array_return.push({ "value" : $(this).html() });
        	});

        	return array_return;
        }

        getProductForCombo();
      });
    });
  </script>
</head>

<body>
<table class="table__product">
  <tr>
    <th>Product</th>
    <th>Chargetype</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>
  <div class="group-container overHidden" id="before">
    <IFRAME class="frame" id=iframe1 name="iframe1" style="display: none" src="about:blank"></IFRAME>
    <form method="post" target="iframe1" action="SubmitToSomeFile" id="frm" accept-charset=UTF-8 name="frm">
      <div class="overHidden">
      	<div class="comboTable">
          <div>Table</div>
          <span id="comboTable"></span>
        </div>

        <div class="comboGroup">
          <div>Product</div>
          <span id="comboCountry"></span>
        </div>
        <div class="comboGroup2">
          <div id="state">
            <br />
          </div>
          <div id="district">ChargeType</div>
          <span id="comboDistrict"></span>
        </div>
        <!-- <div class="comboGroup">
                <div>Town</div>
                <span id="comboTown"></span>
            </div> -->
      </div>
      <br>
      <br>
      <INPUT type="submit" class="button" name="submit" value="Run" id=button2 onClick="_submit_form();">
    </form>
    <!-- frame goes here -->
  </div>
  <div id="after" style="width:99%;border:gray 1px solid;display:none;background-color:#ccc;Padding:5px;height:100px;">Thank you</div>
  <!-- Some Content After the form. -->
  <script language="JavaScript">
    function _submit_form(){
    /**** To hide and display frame ****/
   /* document.getElementById('before').style.display = 'none'; */
  /* 	document.getElementById('after').style.display = 'block'; */
    var text1 = $("#comboCountry").igCombo("text");
    var text2 = $("#comboDistrict").igCombo("text");
	
	/* To handle text for one or multiple chargetypes */
    if (text2.indexOf(',') >= 0) {
    document.getElementById("after").innerHTML = "Your Product is " + text1 + "! Your ChargeTypes are " + text2;
} else {
    document.getElementById("after").innerHTML = "Your Product is " + text1 + "! Your ChargeType is " + text2;
    
}
	return true
}
  </script>
</body>

</html>

相关问题
最新问题