咱俩今天介绍的凡js实现的无代码开发。会将首都起的挑选项。

我们今天介绍的是js实现的无代码开发,会把北京开头的选项

图片 1

Ø 使用div 模仿下拉框

附自定义字段实现:http://blog.csdn.net/cxx2325938/article/details/8284741

  这同样步要是当找到的select节点以后,使用parentNode找到父节点,然后在父节点的innerHTML里加入我们需要的Input,JS脚本附后:

  选项之详尽文字:

2、 使用JS在原来Select位置下面,添加一个Text类型Input,输入文字;

  下面,看看我们只要实现之成效图,如下图(参与调查的页面,其实这是我既办好的页面):

  如下图,当自家于Textbox里输入北京,会管首都开班的挑选项,加载到下拉选项中,如果什么还不输入,就是全下拉选项,这样比较好选择基本上的时,进行筛选选择;

  后记:本来就是一个很简短的思绪,我思将这些分享给大家。对于SharePoint现在开发人员越来越多,我的见还是是:除非必须,绝对免亮堂代码。当然,这个题目为起代码实现之,链接我附后了,大家可比下零星种植实现方式。呵呵,很晚了,睡觉。大家晚安。

View Code

#img_start width="100" height="120" src="http://10.5.92.11/bmdh/jyglb/DocLib/山居秋暝.jpg" #img_end 张三

#img_start width="100" height="120" src="http://10.5.92.11/bmdh/jyglb/DocLib/山居秋暝.jpg" #img_end 李四

#img_start width="100" height="120" src="http://10.5.92.11/bmdh/jyglb/DocLib/山居秋暝.jpg" #img_end 王五

  使用F12查Select的Html代码,发现发Title是许段名,还有id属性,而option的value就是该item的id,所以,我们可使JS来操作是select,如下图;

图片 2

  这个艺术运用Input的onpropertychange事件,但是是时空各个起一个键盘动作,就见面实施同一软,所以自己之所以一个隐藏域存上同样浅的Value的Length,和就同糟比较,不一致的讲话执行Ajax事件,否则就算作为输入而Input域的Value值并没有成形。

  前言:今天,碰到一个有意思的问题,就是SharePoint调查之中,添加对于图片的支撑,众所周知,SharePoint的调查就支持那么几种字段类型的题目,当然,我们得支付实现,不过,这个不是我们今天牵线的,我们今天介绍的凡js实现之无代码开发。

图片 3图片 4

  以页面上加加一个内容编排器web部件,然后以下面论放上,点击确定,发现及了咱们怀念使的效果,然后,同样用js脚本实现调查之统计页面(如下图),这里我为就是非多废话了,大家一直扣效果吧。

SPSecurity.RunWithElevatedPrivileges(delegate()
{
    //此处放置需要以系统账号身份运行的代码
    using (SPWeb web = new SPSite("http://10.10.10.11").OpenWeb())
    {
        SPQuery query = new SPQuery();
        if (k != string.Empty)
        {
            query.Query = @"<Where>
                          <BeginsWith>
                             <FieldRef Name='Title' />
                             <Value Type='Text'>" + HttpUtility.UrlDecode(k) + @"</Value>
                          </BeginsWith>
                       </Where>";
        }
        else
        {
            query.Query = "";
        }

        SPListItemCollection itemcoll = web.Lists["City"].GetItems(query);
        if (itemcoll.Count != 0)
        {
            rev = "<table cellsapcing=‘0‘ cellspadding=‘3‘ border=‘0‘ width=‘100%‘> ";
            foreach (SPListItem item in itemcoll)
            {
                rev = rev + "<tr><td id=myselect" + item["ID"].ToString() + ">" + item["Title"].ToString() + "</td></tr>";
            }
            rev = rev + "</table> ";

        }
    }
});

  如上面文字,我把img标签的前后,用#img_start和#img_end替换了,这样啊是方便我们应用js脚本进行replace替换,js脚本附后,有趣味之可参见下:

  SharePoint
2013底查阅项功能,就是得扩大外列表字段为当下列表选项,但是选择太多的时候,会导致选择起来颇累,所以,我们利用JS+Ajax的办法,改善一下斯展示,使操作更是方便。

<script type="text/javascript">

var divobj = document.getElementsByTagName("LABEL");

for(var i=0;i<divobj.length;i++)

{

if(divobj[i].innerHTML.indexOf("#img_start")>=0)

{

var str = divobj[i].innerHTML;

str =str.replace("#img_start","<img");

str =str.replace("#img_end","></img>");

divobj[i].innerHTML=str;

}

}

</script>

http://hi.baidu.com/wangtanbao/item/6debfe0f6ae8ab21a0312d27

图片 5

1、 使用JS隐藏原来的Select控件;

  如齐图的,带在图片的选料项,在SharePoint自带字段里非常为难落实,所以,我就算想把img标签写于页面及,然后发现当做文字输出到页面上,我不怕悟出用js脚本,替换img标签,所以,我修改了考察中的挑项内容,如下图所示(调查内之挑三拣四):

  整个功能的法则如达到所示,利用JS替换页面的竹签,变为自己的Input+下拉列表(div模拟),并监听Input的价变化,变化时经Ajax更新div下拉列表,选择生拉列表,更新Input同时采用JS脚本更新隐藏的自带查阅项之Value值,完成我们的功效。

<script event="onmouseover" for="oOption">
    obj=event.srcElement

    //判断onmouseover事件是否发生在单元格上
    if(obj.tagName=="TD"){

    //设置事件发生所在的单元格的背景颜色
    obj.style.backgroundColor="#dedede"

    //设置事件发生所在的单元格的字体颜色
    obj.style.color="#FFFFFF"
}
</script>

3、 添加下拉菜单;

4、 写Ajax根据Input的值变化,更新下面的下拉结果;

图片 6

  这个方式无最好多如证明的,记得提升权限;利用Caml语句,获取与传播值相当的型集聚,拼成Table返回,提供Ajax使用。

<script event="onclick" for="oOption">
    obj=event.srcElement
    //判断onmouseover事件是否发生在单元格上
    if(obj.tagName=="TD"){
        showHide()//隐藏层
        //设置id为oSelect的对象内的文本为被点击的单元格内的文本
        document.getElementById("C_Select").innerText=obj.innerText
        var selectObj=document.getElementsByTagName('SELECT');
        for(var i=0;i<selectObj.length;i++)
        {
            if(selectObj[i].title=="所在城市")
            {
                var objvalue=obj.id.substring(8,obj.id.length);
                selectObj[i].value=objvalue;
            }
        }
    }
</script>
if(selectObj[i].title==strSelectTitle)
{
    selectObj[i].style.display='none';
    var Par=selectObj[i].parentNode;
    Par.innerHTML=Par.innerHTML + "<table width='135' style='background-color:white' border='0' cellspacing='0' cellpadding='0'><tr><td><table width='100%' bordercolor='#666666' border='0' cellspacing='0' cellpadding='0' style='border-collapse:collapse;cursor:default' onclick='showHide()'><tr><td align='center'><input type='text' name='C_Select' id='C_Select' onpropertychange='vChange()'></td></tr></table></td></tr><tr><td><div id='oOption' onselectstart='return false'></div></td></tr></table>";
}

呈现效果

<!–鼠标移上id为oOption的对象时实行本段代码–>

Ø 完整的Ajax实例

  功能异常略,代码段也未曾难度,就是简单介绍的一个稍例子,给出有关要求的食指一个参考;也总算自己于SharePoint
2013里以Ajax的一个操演吧,希望在实践中提高协调的力量。

<!—Ajax更新方法,将更新的Table放到Id为oOption的div里–>

原理介绍

5、 开发一个Ajax访问的页面,返回相关结果;

function HiddenField(strSelectTitle)
{
    var selectObj = document.getElementsByTagName("select");
    for(var i=0;i<selectObj.length;i++)
    {
        if(selectObj[i].title==strSelectTitle)
        {
            selectObj[i].style.display='none';
        }
    }
}
setTimeout("HiddenField('所在城市')",1)
function ajax() {
    //创建XMLHttpRequest对象
    var xmlHttp = new XMLHttpRequest();
    //获取值
    var k = escape(document.getElementById("C_Select").value);
    var url = "http://10.5.97.92/GetLookUpAjax/GetData.aspx?k=" + k;
    //配置XMLHttpRequest对象
    xmlHttp.open("get", url);
    //设置回调函数
    xmlHttp.onreadystatechange = function () {
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
        document.getElementById("oOption").innerHTML = xmlHttp.responseText;
    }
    }
    //发送请求
    xmlHttp.send(null);
}
<script type="text/javascript">
function showHide(obj){
    sh={block:"none",none:"block"}
    //层的display属性值在"block"和"none"间不断轮换,
    //达到轮换隐藏和显示的效果
    oOption.runtimeStyle.display=sh[oOption.currentStyle.display]
}
</script>
<script event="onmouseout" for="oOption">
    obj=event.srcElement
    //判断onmouseout事件是否发生在单元格上
    if(obj.tagName=="TD"){
    //设置事件发生所在的单元格的背景颜色
    obj.style.backgroundColor="#FFFFFF"
    //设置事件发生所在的单元格的字体颜色
    obj.style.color="#000000"
}
</script>

<!–鼠标从id为oOption的对象上移开时实行本段代码–>

http://www.cnblogs.com/oneword/archive/2011/06/04/2072558.html

  隐藏Select的JS脚本,就是赢得有的select控件对象,然后找到title相符合的,当然你也可根据id来收获,id的格式应该是中字段名称+列表GUID+字段类型标识,看你的习惯了,附JS脚本如下:

function vChange()
{
    document.getElementById("hiddenNum").value=document.getElementById("C_Select").value.length;
    if(document.getElementById("C_Select").value.length>document.getElementById("hiddenNum").value.length)
    { 
        ajax(); 
    }
}

  以下重点就是公JS脚本,放在页面上就得,没有什么特别要说明的地方。当然,我们可当系事件上,添加我们得之代码段。

<!–隐现层的函数–>

<!—监视Input值变化,如果转则实施ajax方法创新下拉列表–>

<!–id为oOption的靶子吃单击时实施本段代码–>

图片 7

专门:这些下论是百度上查到的,但是他吗是转载,没有原文链接,所以没有附后;