專案中我做修改使用者個人資料的時候，有一個需求是幫助人員的幫助型別如圖下所示：

       當初想如果是asp.net控制元件的話應該很簡單實現，如果不是基於easyUI框架那就太簡單了，現在是受框架的限制與是前端html控制元件，所以還是會稍微多轉化一下，

前提

         這個是個人資料的修改，需要如果使用者已經選擇某項的話，需要載入時打上對勾：如圖所示

思路

        對於資料的儲存考慮過可以存放到多個欄位裡面，這樣操作起來方便，現在通過查詢資料是可以把這些只要是選中的某項都可以拼接成字串存入到資料庫中的一個欄位中，讀取的時候需要先把這些資訊讀取出來，再通過對字串的拆分與讀取，判斷是否某些值被選擇，這樣大致的思路就有了，現在我們來實戰：

實現過程

首先定義的是一個隱藏空間為了存取資料向後臺傳送資料

<input id="zonestr" name="zonestr" type="text" style="display: none" />

由於下面的複選框度在一個div裡面存放，所以呼叫的是對div的點選事件：

<div id="div1" style="border: 1px solid #D1D1D1" onclick="javascript:GetZone()">

接下來是如何把要選定的某項存入資料庫中

<script>
        function GetZone() {

            //獲取input所在div的物件
            var ob = document.getElementById("div1");

            //獲取div中所用的IUPUT控制元件集合
            var col = div1.getElementsByTagName("INPUT");
            //定義一個變數並初始化為空
            var str = "";
            var count = 0;

            //迴圈遍歷，判斷INPUT是否選中
            for (var i = 0 ; i < col.length; i++) {
                if (col[i].checked == true) {
                    count++;
                    if (count == 1) {//當是一個值得時候，直接把選中的值賦給字串
                        str += col[i].value;
                    }
                    else {
                        str += "/" + col[i].value;//多個被選中的時候，需要把選定的值不斷的拼接
                    }
                    //str+=col[i].value+"/";
                }
            }
            document.getElementById("zonestr").value = str;//把選擇完後的字串給一個隱藏空間以便向後臺傳送

        }
    </script>
 

這樣通過提交表單的方法就可以把介面上的資料提交到後臺，可以輕鬆的寫入到資料庫中了

核心內容：

              對如何讀取並判斷資料並打上對勾呢？由於是基於easyui框架，需要通過Json資料的傳送

 <script>
        $('#sheyuan').form('submit', {
            url: 'ShowMember.ashx',//呼叫的一般處理程式
            onSubmit: function () {

            },
            dataType: "json",
            success: function (data) {//返回的資料在data中
                var NowLivecountry = eval("(" + data + ")").NowLivecountry//json為接收的後臺返回的資料，拿出我存放介面上值得欄位；

                var list = NowLivecountry.split('/');//把資料給拆分並放到list裡面
               
               
                //獲取input所在div的物件
                var ob = document.getElementById("div1");

                //獲取div中所用的IUPUT控制元件集合
                var col = div1.getElementsByTagName("INPUT");

                var str = "";
                var count = 0;
                //通過頁面上的迴圈獲取的值與後臺傳送過來放到list中的資料一一比對，如果和介面的內容一致的就可以選擇，讓其打上對勾
                for (var obj in list) {
                    for (i = 0; i < col.length; i++) {//介面上input中的值

                        for (j = 0; j <= list.length; j++)//list中的值
                        {

                            if (col[i].value == list[j])//比較是否內容相等，如果一致就在介面上打上對勾
                            {
                                col[i].checked = true//是combox選中，打上對勾

                            }
                        }
                    }



                }
            }
        });
 

Json中返回的資料格式：

存入list中的資料結構，對於這樣的內容如果理解了，整體理解很簡單了。

總結

       整個實現功能接觸了：easyui架構中頁面如何載入資料、如何從json資料中拿到某個欄位值的內容、把json資料存入list、通過小的for迴圈來實現資料的對比，實現功能主要來源於靜下心來多多的思考，這方面自己接下來多多的努力鍛鍊。