绑定数据分两部分较均匀的显示

下面就是将返回的JSON对象，分成两部分显示，效果图如下：

 

html代码如下：

<div class="datalist">
        <div class="span2">
            <table class="data" id="ComponentServiceFirList">
                <thead>
                    <tr>
                        <th>
                            开通服务
                        </th>
                        <th>
                            回复关键词
                        </th>
                        <th style="width: 75px;">
                            状态
                        </th>
                    </tr>
                </thead>
               
            </table>
        </div>
        <div class="span2">
            <table class="data" id="ComponentServiceSecList">
                <thead>
                    <tr>
                        <th>
                            开通服务
                        </th>
                        <th>
                            回复关键词
                        </th>
                        <th style="width: 75px;">
                            状态
                        </th>
                    </tr>
                </thead>
           
            </table>
        </div>
    </div>

 

绑定数据的模板

<span style="font-family:Microsoft YaHei;font-size:18px;"><script type="text/html" id="ComponentServiceItem">
         <tbody>
            <tr>
                <td><spanclass="sn music">{ComponentName}</span></td>
               <td><span>{Describe}</span></td>
                <tdClass="classTd">
                    <inputtype="checkbox" class="inputCheckbox" name="ch_emails" data-on="ON" data-off="OFF"style="display: none;" checked="checked" >
<span class="tzCheckBox {StrCss}"><spanid="{Code}" class="tzCBContent">{StrValue}</span><spanclass="tzCBPart"></span></span>
                </td>
              
            </tr>
          </tbody>
    </script>
 </span>

返回数据，分两部分显示，这里采用的是数组的方式解决的：

<span style="font-family:Microsoft YaHei;font-size:18px;">$(function () {
            //加载说有的服务，及当前公众号下开启的服务
            var $this;
            var getPublicNum="201e1928-e584-adb0-46d9-5effe561e646";
            LoadData(getPublicNum);
 
}
 
//加载页面时查询所有数据
        function LoadData(getPublicNum) {
            $.ajax({
                url:"../Hander/AshxComponentService.ashx",
                Type:"get",
                dataType:"json",
                data: {
                    //参数有公众号
                    operType:"Query",
                    publicNum:getPublicNum
                },
                success:ShowTable,
                error:function(error) {
                    showerrortip("数据异常");
                }
            });
        }
        //让数据在able中显示
        function ShowTable(data) {
            //这里存放的是一个表中的数据，条数=对象长度/2;
            //    如果对象长度%2=0，fistTableData条数为对象长度/2；否则为条数=对象长度/2+1；secondTableData的长度始终为：对象长度/2
 
            var fistTableDataArrObj=newArray();
            var secondTableDataArrObj=newArray();
 
            //第一个数组中存放数据对象的个数
            var fistTableDataCount;
            //第二个数组中存放数据对象的个数
            //            var secondTableDataCount;
 
            //当总长度为偶数时，俩表中的数据个数相同；不同数组中的对象个数第一个表得长度有变化；第二表得长度总是parseInt(data.length / 2)；
            if (parseInt(data.length%2) ==0) {
                fistTableDataCount=parseInt(data.length/2);
                //                secondTableDataCount =parseInt(data.length / 2);
            }
            //当总长度为奇数时，第一个表中的数据比第二个表中多一个。
            if (data.length%2!=0){
                fistTableDataCount=parseInt(data.length/2) +1;
                //                secondTableDataCount =parseInt(data.length / 2);
            }
 
            //循环出各个数组的对象
            //第一个数组中存放的是：ComponentServiceFirList中的对象
            for (var i=0; i<fistTableDataCount;i++) {
                fistTableDataArrObj.push(data[i]);
 
            }
            //第二个数组中存放的是：ComponentServiceSecList中的对象
            for (var j=fistTableDataCount; j<data.length; j++) {
                secondTableDataArrObj.push(data[j]);
            }
 
            //给不同的表赋值
            $(".data").empty();
 
            //ComponentServiceFirList中的数据
            var firstResult=KnowingDo.Json.binderJson(fistTableDataArrObj,$("#ComponentServiceItem").html());
            $("#ComponentServiceFirList").append(firstResult);
 
            //ComponentServiceSecList中的数据
            var secondResult=KnowingDo.Json.binderJson(secondTableDataArrObj,$("#ComponentServiceItem").html());
            $("#ComponentServiceSecList").append(secondResult);
 
        }
 
 </span>

这里主要介绍的是数组在JS的应用，当然这里面包含了它们自己封装的一些方法，正在学习中，日后再来细细讲解。