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点，睡吧。。

SharePoint 2016 自定义城市和区域字段的更多相关文章

SharePoint 2016 入门视频教程
之前一直有朋友让自己录一些SharePoint的入门视频,之前没有太多时间,一个巧合的机会收到CSDN学院的邮件,可以在CSDN上发布视频教程,自己就录了一些.说起录视频也是蛮辛苦的,每天下班吃完饭要 ...
每日学习心得：SharePoint 2013 自定义列表项添加Callout菜单项、文档关注、SharePoint服务端对象模型查询
前言: 前一段时间一直都比较忙,没有什么时间进行总结,刚好节前项目上线,同时趁着放假可以好好的对之前遇到的一些问题进行总结.主要内容有使用SharePoint服务端对象模型进行查询.为SharePoi ...
SharePoint 2016 配置工作流环境
前言 SharePoint 2016 默认创建工作流的时候,工作流平台只包含2010版本,如果想要使用状态机工作流,需要单独安装workflow manager 1.0才可以,下面,我们为大家介绍一下 ...
在Visual Studio 2015 中添加SharePoint 2016 开发模板
前言 SharePoint 2016已经发布很久了,然而,默认安装VS2015以后,却没有SharePoint 2016的开发模板.其实问题很简单,和VS2012开发SharePoint 2013一样 ...
SharePoint 2016 配置向导报错 - The 'ListInternal' attribute is not allowed
前言配置SharePoint 2016的配置向导中,第三步创建配置数据库报错,然后百度.谷歌了一下,都没有解决,自己看日志搞定,也许会有人遇到类似问题,分享一下. 1.配置向导的错误截图,如下图: ...
SharePoint 2013 自定义扩展菜单
在对SharePoint进行开发或者功能扩展的时候,经常需要对一些默认的菜单进行扩展,以使我们开发的东西更适合SharePoint本身的样式.SharePoint的各种功能菜单,像网站设置.Ribbo ...
SharePoint 2013 自定义扩展菜单（二）
接博文<SharePoint 2013 自定义扩展菜单>,多加了几个例子,方便大家理解. 例七列表设置菜单扩展(listedit.aspx) 扩展效果 XML描述 <CustomA ...
SharePoint 2016 图文安装教程
前言 SharePoint 2016如约而至,之前也装过预览版,但是这次是正式版,还是分享一个完整的安装过程给大家,希望能给有需要的人有所帮助. 1.首先安装操作系统,我这里是Windows Serv ...
sharePoint 2016 弃用和删除的功能
前言 sharepoint 2016版本正式发布,但是相比较2013版本,还是删除或者准备删除一些功能,我们需要了解一下哪些功能已经被删除掉或者在下一个版本中移除,因为这些可能影响我们现有系统是否能够 ...

随机推荐

关于PHP的工作流引擎
关于PHP的工作流引擎,除了三大主流开源:PorcessMaker(排名第一,因其有拖放式图形定义界面),RadiCore(基于PETRI NET)和CuteFlow以外,另外还有一个不为人知的,但却 ...
C#-利用ZPL语言完毕条形码的生成和打印
近期由于公司项目的须要,研究了一项对我来说算是新的技术-条形码的生成和打印.由于之前没有接触过这方面的知识,所以刚開始还有点小迷茫和小兴奋,只是一步一步来,问题总会解决的.如今来总结一下做条形码 ...
POJ 1201 && HDU 1384 Intervals(差动制动系统）
职务地址:POJ 1201 HDU 1384 依据题目意思.能够列出不等式例如以下: Sj-Si>=c; Si-S(i-1)>=0; S(i-1)-Si>=-1; 然后用最短路s ...
设计与实现的简单和经常使用的权限系统(五岁以下儿童):不维护节点的深度level，手工计算level，树形结构
以这种方式.和第三的类似介绍.所不同的是.深度未在数据库中存储节点level,添加和更改时间,护.而是,在程序中,实时去计算的. 至于后面的,依照level升序排序,再迭代全部的节点构造树,与第三篇 ...
HDU1024 Max Sum Plus Plus(DP)
状态:d(i,j)它代表前j划分数i部并且包括第一j最佳结果时的数.g(i,j)表示前j划分数i最好的结果时,段,g(m,n)结果,需要. 本题数据较大.需採用滚动数组.注意:这题int类型就够用了, ...
Extjs grid分页多选记忆功能
很多同事在用extjs grid做分页的时候,往往会想用grid的多选功能来实现导出Excel之类的功能(也就是所谓的多选记忆功能),但在选选择下一页的时候上一页选中的已经清除这是因为做分页的时候 ...
cocos2d的-X- luaproject的LUA脚本加密
2014/1/26 更新近期又发现了一个非常easy的方法,事实上coco2dx已经给我们提供设置loader的方法. 注意:有个局限性,在非android平台下调用pEngine->exec ...
Run QTP script wiht host in HPQC
Hdu 1016 Prime Ring Problem (素数环经典dfs)
Prime Ring Problem Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...
MVC ValidationAttribute 服务器端自定义验证
MVC ValidationAttribute 服务器端自定义验证客户端验证上文只说了客户端的自定义验证,这样对于用户的输入还是不够可靠,用户完全可以绕过我们定义的客户端验证.所以仅有客户端的验证 ...

SharePoint 2016 自定义城市和区域字段

SharePoint 2016 自定义城市和区域字段的更多相关文章

随机推荐

热门专题