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 = "<script type='text/javascript' src='/_layouts/15/LinyuCityField/Script.js'></script><script type='text/javascript' src='/_layouts/15/LinyuCityField/jquery-1.7.1.js'></script>"; string scriptInit = @"<script type='text/javascript'>$(document).ready(function(){ setInterval(syncValue,1000); initSelect('" + myGuid + @"province','0'); $('#" + myGuid + @"province').change(function(){ var vv = $(this).val(); //if(vv=='11'||vv=='12'||vv=='31'||vv=='50'){$('#" + myGuid + @"district').hide();}else{$('#" + myGuid + @"district').show();} $('#" + myGuid + @"city').empty(); initSelect('" + myGuid + @"city',vv); $('#" + myGuid + @"district').empty(); }); $('#" + myGuid + @"city').change(function(){ var vv = $(this).val(); var lsvv=vv.substring(0,2); //if(lsvv=='11'||lsvv=='31'||lsvv=='12'||lsvv=='50'){$('#" + myGuid + @"district').hide();}else{$('#" + myGuid + @"district').show();} $('#" + myGuid + @"district').empty(); initSelect('" + myGuid + @"district',vv); }); });</script>"; string scriptInit2 = @"<script type='text/javascript'>$(document).ready(function(){ setInterval(syncValue,1000); $('#" + myGuid + @"province').change(function(){ var vv = $(this).val(); //if(vv=='11'||vv=='12'||vv=='31'||vv=='50'){$('#" + myGuid + @"district').hide();}else{$('#" + myGuid + @"district').show();} $('#" + myGuid + @"city').empty(); initSelect('" + myGuid + @"city',vv); $('#" + myGuid + @"district').empty(); }); $('#" + myGuid + @"city').change(function(){ var vv = $(this).val(); var lsvv=vv.substring(0,2); //if(lsvv=='11'||lsvv=='31'||lsvv=='12'||lsvv=='50'){$('#" + myGuid + @"district').hide();}else{$('#" + myGuid + @"district').show();} $('#" + myGuid + @"district').empty(); initSelect('" + myGuid + @"district',vv); }); });</script>"; Page.ClientScript.RegisterStartupScript(this.GetType(), "scriptLink", scriptLink); string selectHtml = string.Empty; if (this.ControlMode == SPControlMode.New) { Page.ClientScript.RegisterStartupScript(this.GetType(), "scriptInit", scriptInit); selectHtml = "<select id='" + myGuid + "province'></select><select id='" + myGuid + "city'></select><select id='" + myGuid + "district'></select>"; } 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 = "<Where><Eq><FieldRef Name='Title' /><Value Type='Text'>" + fvs[0] + "</Value></Eq></Where>"; item1 = list.GetItems(query1)[0]; province = getOptions(item1["ParentId"].ToString(), item1["Title"].ToString()); break; case 2: query1.Query = "<Where><Eq><FieldRef Name='Title' /><Value Type='Text'>" + fvs[0] + "</Value></Eq></Where>"; item1 = list.GetItems(query1)[0]; province = getOptions(item1["ParentId"].ToString(), item1["Title"].ToString()); query2.Query = "<Where><Eq><FieldRef Name='Title' /><Value Type='Text'>" + fvs[1] + "</Value></Eq></Where>"; item2 = list.GetItems(query2)[0]; city = getOptions(item2["ParentId"].ToString(), item2["Title"].ToString()); break; case 3: query1.Query = "<Where><Eq><FieldRef Name='Title' /><Value Type='Text'>" + fvs[0] + "</Value></Eq></Where>"; item1 = list.GetItems(query1)[0]; province = getOptions(item1["ParentId"].ToString(), item1["Title"].ToString()); query2.Query = "<Where><Eq><FieldRef Name='Title' /><Value Type='Text'>" + fvs[1] + "</Value></Eq></Where>"; item2 = list.GetItems(query2)[0]; city = getOptions(item2["ParentId"].ToString(), item2["Title"].ToString()); query3.Query = "<Where><Eq><FieldRef Name='Title' /><Value Type='Text'>" + fvs[2] + "</Value></Eq></Where>"; item3 = list.GetItems(query3)[0]; district = getOptions(item3["ParentId"].ToString(), item3["Title"].ToString()); break; } } } html = "<select id='" + myGuid + "province'>" + province + "</select><select id='" + myGuid + "city'>" + city + "</select><select id='" + myGuid + "district'>" + district + "</select>"; 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("<View><Query><Where><Eq><FieldRef Name='ParentId' /><Value Type='Text'>" + vv + "</Value></Eq></Where></Query></View>"); 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("<option value='" + listsE.get_current().get_item("CityId") + "'>" + listsE.get_current().get_item("Title") + "</option>"); } } catch (ex) { console.log(ex) } }), Function.createDelegate(this, function () { alert("failed") })); } catch (ex) { } } 　　6、 初始化行政区，根据国家统计局的最新县及县以上行政区划代码，用jquery获取DOM元素，并且格式化成我需要的格式，放到列表实例里面使用，这样激活解决方案以后，就有数据源了。