SharePoint 如何自定義城市與區域字段

　最近有這么一個需求，就是用到中國的各種行政區，然后還是三級聯動，就琢磨寫這么一個字段。然后，覺得挺有意義的，寫字段的過程也有點心得，就想到拿到博客里分享給大家，一起看看。?

　　1、 創建字段的解決方案，包括：字段類、字段控件類、字段控件的前臺文件、字段的描述文件、城市和區域的數據列表、字段的Feature和其中所需要的JavaScript庫和文件。

　　2、 在字段的前臺控件上，添加我們需要的控件，當在顯示視圖（DispForm）的時候，只有一個Label控件用來顯示值，除此之外的視圖（NewForm和EditForm）的時候，有一個Label控件用來輸入下拉框等的html，一個TextBox控件用來保存和修改值，一個隱藏字段用來存一個Guid，防止一個列表加多個字段時，控件的Id有重復。

　　3、 初始化控件的核心代碼，主要包括輸入城市和區域下拉框控件的Html代碼，并且綁定相關的事件。

protected override void CreateChildControls(){    base.CreateChildControls();    if (this.Field != null)    {        this.lbValue = (Label)TemplateContainer.FindControl("lbValue");        this.tbValue = (TextBox)TemplateContainer.FindControl("tbValue");        this.hfValue = (HiddenField)TemplateContainer.FindControl("hfValue");        this.lbValueResult = (Label)TemplateContainer.FindControl("lbValueResult");    }    if (this.ControlMode == SPControlMode.Display)    {        if (lbValueResult != null)        {            lbValueResult.Text = this.ItemFieldValue.ToString();        }    }    else    {        string myGuid = Guid.NewGuid().ToString().Replace("-", "");        string scriptLink = "";        string scriptInit = @"";        string scriptInit2 = @"";        Page.ClientScript.RegisterStartupScript(this.GetType(), "scriptLink", scriptLink);        string selectHtml = string.Empty;        if (this.ControlMode == SPControlMode.New)        {            Page.ClientScript.RegisterStartupScript(this.GetType(), "scriptInit", scriptInit);            selectHtml = "";        }        else        {            string fieldValue = this.ItemFieldValue.ToString();            string[] filedValues = fieldValue.Split('-');            selectHtml = initEditHtml(myGuid, fieldValue);            Page.ClientScript.RegisterStartupScript(this.GetType(), "scriptInit2", scriptInit2);        }        if (hfValue != null)            hfValue.Value = myGuid;        if (lbValue != null)            lbValue.Text = selectHtml;    }}

　　4、 編輯頁面時初始化控件的代碼，包括省、城市、區域。

public string initEditHtml(string myGuid, string fieldValue){    string html = string.Empty;    string[] fvs = fieldValue.Split('-');    string province = string.Empty;    string city = string.Empty;    string district = string.Empty;    using (SPSite site = new SPSite(SPContext.Current.Site.ID))    {        using (SPWeb web = site.OpenWeb(SPContext.Current.Web.ID))        {            SPList list = web.Lists.TryGetList("CityDataSourse");            SPQuery query1 = new SPQuery();            SPQuery query2 = new SPQuery();            SPQuery query3 = new SPQuery();            SPListItem item1;            SPListItem item2;            SPListItem item3;            switch (fvs.Length)            {                case 1:                    query1.Query = "" + fvs[0] + "";                    item1 = list.GetItems(query1)[0];                    province = getOptions(item1["ParentId"].ToString(), item1["Title"].ToString());                    break;                case 2:                    query1.Query = "" + fvs[0] + "";                    item1 = list.GetItems(query1)[0];                    province = getOptions(item1["ParentId"].ToString(), item1["Title"].ToString());                    query2.Query = "" + fvs[1] + "";                    item2 = list.GetItems(query2)[0];                    city = getOptions(item2["ParentId"].ToString(), item2["Title"].ToString());                    break;                case 3:                    query1.Query = "" + fvs[0] + "";                    item1 = list.GetItems(query1)[0];                    province = getOptions(item1["ParentId"].ToString(), item1["Title"].ToString());                    query2.Query = "" + fvs[1] + "";                    item2 = list.GetItems(query2)[0];                    city = getOptions(item2["ParentId"].ToString(), item2["Title"].ToString());                    query3.Query = "" + fvs[2] + "";                    item3 = list.GetItems(query3)[0];                    district = getOptions(item3["ParentId"].ToString(), item3["Title"].ToString());                    break;            }        }    }    html = "" + province + "" + city + "" + district + "";    return html;}

　　5、 前臺JavaScript的原理，根據當前選項的ID獲取下一級控件并初始化，Id是下一級控件的Id后綴部分，vv也就是關聯的ParentId。

　　http://www.stats.gov.cn/tjsj/tjbz/xzqhdm/201608/t20160809_1386477.html

function initSelect(Id, vv) {    try {        var hfId = $("#DefaultCustomFieldControlZone input[type='hidden']").val();        if (vv == "11" || vv == "12" || vv == "31" || vv == "50") {            $("#" + hfId + "district").hide();        }        else {            $("#" + hfId + "district").show();        }        var mycontext = new SP.ClientContext.get_current();        var mysite = mycontext.get_web();        var query = new SP.CamlQuery();        query.set_viewXml("" + vv + "");        var mylist = mysite.get_lists().getByTitle('CityDataSourse');        myitem = mylist.getItems(query);        mycontext.load(myitem, 'Include(Title,Id,CityId,Code)');        mycontext.executeQueryAsync(Function.createDelegate(this, function () {            try {                $("#" + Id + " option").remove();                var listsE = myitem.getEnumerator();                while (listsE.moveNext()) {                    $("#" + Id).append("" + listsE.get_current().get_item("Title") + "");                }            }            catch (ex) { console.log(ex) }        }), Function.createDelegate(this, function () { alert("failed") }));    }    catch (ex) { }}

　　6、 初始化行政區，根據國家統計局的最新縣及縣以上行政區劃代碼，用jquery獲取DOM元素，并且格式化成我需要的格式，放到列表實例里面使用，這樣激活解決方案以后，就有數據源了。

　　7、 初始化行政區的JavaScript腳本，水平有限，寫的比較爛，大家參考即可。?

 function GetResult()  {      var h1 = "";      var h2 = "";      var h3 = "";      var h4 = "";      var h5 = "";      var result = "";      var num = 0;                $(".TRS_PreAppend p").each(function(){          var spans = $(this).find("span");          if($(spans[1]).text()!="縣"&&$(spans[1]).text()!="市轄區")          {              if($(spans[0]).text().substring(0,2)=="11"||$(spans[0]).text().substring(0,2)=="12"||$(spans[0]).text().substring(0,2)=="31"||$(spans[0]).text().substring(0,2)=="50")              {                  if($(spans[0]).text().substring(2,6)=="0000")                  {                      result += h1 + $(spans[1]).text() + h2 + $(spans[0]).text().substring(0,2) + h3 + "0" + h4 + $(spans[0]).text() + h5;                      num++;                  }                  else                  {                      result += h1 + $(spans[1]).text() + h2 + $(spans[0]).text().substring(0,4) + h3 + $(spans[0]).text().substring(0,2) + h4 + $(spans[0]).text() + h5;                      num++;                  }              }              else              {                  if($(spans[0]).text().substring(2,6)=="0000")                  {                      result += h1 + $(spans[1]).text() + h2 + $(spans[0]).text().substring(0,2) + h3 + "0" + h4 + $(spans[0]).text() + h5;                      num++;                  }                  else                  {                      if($(spans[0]).text().substring(4,6)=="00")                      {                          result += h1 + $(spans[1]).text() + h2 + $(spans[0]).text().substring(0,4) + h3 + $(spans[0]).text().substring(0,2) + h4 + $(spans[0]).text() + h5;                          num++;                      }                      else                      {                          result += h1 + $(spans[1]).text() + h2 + $(spans[0]).text().substring(0,6) + h3 + $(spans[0]).text().substring(0,4) + h4 + $(spans[0]).text() + h5;                          num++;                                            }                                    }              }          }      })      $("#Result").text(result);  }

?　　8、 添加的城市字段，類型為城市和區域，如下圖。

　　9、 城市字段的效果圖，選中省會初始化市，然后初始化區。如果直轄市是初始化區，如下圖：

總結

　　整個代碼的思路就是首先創建一個字段，然后字段的前臺控件主要是展示，TextBox里面是值的修改和保存，用JavaScript和前臺控件進行交互。為了防止一個列表加多個字段，控件的Id會重復，特意加了Guid作區分。同時，總結行政區的時候也很費勁，突發奇想用JavaScript去整理，然后花了不到兩個小時，就整理好了，如果有其他格式的，改改就能用。善哉善哉。