zoukankan      html  css  js  c++  java
  • 使用Javascript隐藏/显示NewForm/EditForm列

    在纯的SharePoint客户端开发,考虑到这样一个需求,你需要操作一个SharePoint List,你建了很多列,但是不是所有的列都希望给最终用户看到,该怎么办?

    显然,只能用JavaScript了。

    按照我这个文档最后提出的一个实践,你可以做一个给把你的代码写到一个HTML文件中,然后引用你的这个文件。如下图所示:

    image

    通常情况下,我会把需要引用到的JS文件放在一个单独的CEWP中,这样做的最大好处就是在部署的时候,这些JS引用只用在初次部署,或者有改动的时候去动。由于自己的代码脱离了这些引用,就可以放到任意地方了。

    当然,也有很多别的方法帮你做到着一些,比如把JS引用放到MasterPage中,你甚至可以用SmartTools jQueryLoader for SharePoint去自动做这些事情。

    image

    image

    做好这些准备工作以后,就可以开始真正的写自己的代码了。

    首先,解释下思路,如下图,对于一个SharePoint Field,会被解释成为一个TR(红色框)。其中分为2列(TD,蓝色框),然后TD中会有控件(绿色框)。

    一般来说,左边是控件的Label,这个是比较固定的,而右边,根据控件的不同,控件解析出来的HTML会有很多变化。

    所以我选择左边的Label入手,隐藏整个SharePoint Field。

    image

    隐藏后效果:

    image

    代码:

    $(document).ready( function (){
    	Init();
    	RenderControls();
    	
    });
    
    function Init(){
    	CacheVariables(); //缓存变量,这里主要缓存了列表的结构
    	lblTitle = GetFormLabelBySchema(GetFieldSchema(FIELD_LIST_Schema, "Title"));
    }
    
    function RenderControls(){
    	SetListFormFieldRowByLabel(lblTitle, "hide");
    	$(ctrlListForm).show();
    }
    
    function CacheVariables(){
    	if (FIELD_LIST_Schema == ""){
    		GetList(FIELD_LIST, false, 
    			function (xData){
    				FIELD_LIST_Schema = xData;
    			}, 
    			function(){
    				FIELD_LIST_Schema = "";
    			}
    		);
    	}
    }
    
    function GetList(listName, async, callback, errorHanlder){
    	$().SPServices({
    			operation: "GetList",
    			listName: listName,
    			async: async,
    			completefunc: function(xData,Status) {   
            		//alert(xData.responseText);
    				if(Status=="success") {
    					callback(xData.responseXML);
     				} else {
     					errorCode = -1;
     					errorMessage = $(xData.responseXML).find("errorstring").first().text();
     					errorHanlder(xData.responseXML);
     				}
     		 	}	
    	});
    }
    
    //这个方法根据结构找到对应每一列的标题
    function GetFormLabelBySchema(fieldXML){
    	var title = fieldXML.attr("DisplayName"); 
    	var required = fieldXML.attr("Required");
    	if (required == "TRUE") {
    		title = title+' * ';
    	} else {
    		title = title+' ';
    	}
    
    	var ctrls = $('h3[innerText="'+title+'"]');
    
    	if (ctrls.length == 0) {
    		return null;
    	} else {
    		return ctrls.first();
    	}
    }
    
    //根据标题设置整行属性
    function SetListFormFieldRowByLabel(ctrl, status) {
    	var ctrlRow = ctrl.closest("tr");
    	switch (status) {
    		case "hide":
    			ctrlRow.hide(); 
    			break;
    		case "show":
    			ctrlRow.show();
    			break;
    		case "disabled":
    			ctrlRow.attr("disabled","disabled");
    			break;
    		case "enabled":
    			ctrlRow.removeAttr("disabled");
    			break;
    	}
    }
    
    //从列表的结构中分离出一列的结构信息,可以用来查找显示名,列的类型等等
    function GetFieldSchema(fields, fname){
    	return $(fields).find('Field[Name="'+fname+'"]').first();
    }
     
     
    
    

    最后,使用JavaScript主要是为了动态的实现列的显示或者隐藏。在某些情况下,不需要动态,而是一种纯静态的,例如,需要对当前记录进行评分,而不希望用户编辑这个信息,可以用一下方法实现。

    首先允许管理Content Type,

    image

    image

    这样你就可以看到Content Type了,并且在添加列的时候多了一个选项,不要选择Add to all content types

    image

    image

    奥秘就在这选项中,如果你添加的这一列不在任何一个Content Type中,那么在New/Edit的时候就不会显示出来的,如果想利用到这个值,就需要工作流或者一些自定义了。

  • 相关阅读:
    yocto/bitbake 学习资源
    QEMU/KVM学习资源
    ubuntu 中创建和删除用户
    git 重命名本地和远程分支
    Ubuntu 上搭建 FTP 服务器
    gdb 常见用法
    git log 显示与特定文件相关的 commit 信息
    基于 qemu system mode 运行 arm 程序
    基于 qemu user mode 运行 aarch64 程序
    checking in(airport)
  • 原文地址:https://www.cnblogs.com/lambertqin/p/1957052.html
Copyright © 2011-2022 走看看