正文
SharePoint 2016 自定义城市和区域字段
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
前言
最近有这么一个需求，就是用到中国的各种行政区，然后还是三级联动，就琢磨写这么一个字段。然后，觉得挺有意义的，写字段的过程也有点心得，就想到拿到博客里分享给大家，一起看看。
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 :
query1.Query = "<Where><Eq><FieldRef Name='Title' /><Value Type='Text'>" + fvs[] + "</Value></Eq></Where>";
item1 = list.GetItems(query1)[];
province = getOptions(item1["ParentId"].ToString(), item1["Title"].ToString());
break; case :
query1.Query = "<Where><Eq><FieldRef Name='Title' /><Value Type='Text'>" + fvs[] + "</Value></Eq></Where>";
item1 = list.GetItems(query1)[];
province = getOptions(item1["ParentId"].ToString(), item1["Title"].ToString());
query2.Query = "<Where><Eq><FieldRef Name='Title' /><Value Type='Text'>" + fvs[] + "</Value></Eq></Where>";
item2 = list.GetItems(query2)[];
city = getOptions(item2["ParentId"].ToString(), item2["Title"].ToString());
break; case :
query1.Query = "<Where><Eq><FieldRef Name='Title' /><Value Type='Text'>" + fvs[] + "</Value></Eq></Where>";
item1 = list.GetItems(query1)[];
province = getOptions(item1["ParentId"].ToString(), item1["Title"].ToString());
query2.Query = "<Where><Eq><FieldRef Name='Title' /><Value Type='Text'>" + fvs[] + "</Value></Eq></Where>";
item2 = list.GetItems(query2)[];
city = getOptions(item2["ParentId"].ToString(), item2["Title"].ToString());
query3.Query = "<Where><Eq><FieldRef Name='Title' /><Value Type='Text'>" + fvs[] + "</Value></Eq></Where>";
item3 = list.GetItems(query3)[];
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元素，并且格式化成我需要的格式，放到列表实例里面使用，这样激活解决方案以后，就有数据源了。
7、 初始化行政区的JavaScript脚本，水平有限，写的比较烂，大家参考即可。
function GetResult()
{
var h1 = "<Row><Field Name='Title'>";
var h2 = "</Field><Field Name='CityId'>";
var h3 = "</Field><Field Name='ParentId1'>";
var h4 = "</Field><Field Name='Code'>";
var h5 = "</Field></Row>";
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去整理，然后花了不到两个小时，就整理好了，如果有其他格式的，改改就能用。善哉善哉。
好吧，如果大家想说没有什么技术含量，确实是体力活居多，有需要的人可以参考参考。好了，就到这里，已经过了12点，睡吧。。
