jQuery修改SharePoint 2010列宽

时间:2012-08-18 18:32:39

标签: jquery sharepoint-2010

我觉得这是一个补救问题,但我现在已经和我斗争了好几天了......太原谅我了。我在SharePoint 2010中工作,并在Gantt View中有一个任务列表。该列表有6列加上甘特图。这些任务与Microsoft Project 2010同步(创建)。由于列宽在SharePoint中不是持久的,我希望第2列(标题)的默认宽度为450px(应该足够简单......对吗?)。我已尝试使用CEWP尝试设置此列宽度的许多jquery选项。我认为这样会更容易......有人可以帮我确定我离开赛道的位置吗?我一直在寻找互联网,直到浏览器再也无法接受它...任何帮助都会非常感激。

我尝试过的选项:它们似乎都没有工作......我将它们放在库中的文本文件中(链接到CEWP),脚本正在运行,因为我可以设置splitterposition和zoom级别...而不是列的宽度。

选项#1

    <script type="text/javascript">
    $(function(){
    $("TH.ms-vh2-nograd:contains('Title')").css("width", "450px"); 
    $("TH.ms-vb:contains('Title')").css("width", "450px"); }); 
    </script>

选项#2

    <script type="text/javascript"> 
    $(function() 
    { 
        $("tr.ms-viewheadertr th:contains('Title')").css("width", "450px"); 
    });
    </script>

选项#3

    <script type="text/javascript"> 
    ExecuteOrDelayUntilScriptLoaded(function()
    {
    var oldGanttControl = SP.GanttControl;
    SP.GanttControl = function()
    {
    oldGanttControl.call(this);
    var oldInit = this.Init;
    this.Init = function(jsGridControl, jsRawGridData, params)
    {
    oldInit.call(this, jsGridControl, jsRawGridData, params);
    DoCustomizations(jsGridControl);
    };
    };
    },"SPGantt.js");

    Function DoCustomizations(grid)
    {
    var columns = grid.GetColumns();
    $.each(columns, function(key, value) {
    value.width=450;});
    grid.UpdateColumns(grid.parentNode.jsgridtableviewparams.columns);
    }
    </script>

有效的守则就在这里。但无法解析列宽。

    <script type="text/javascript">
    ExecuteOrDelayUntilScriptLoaded(function()
    {
    var oldGanttControl = SP.GanttControl;
    SP.GanttControl = function()
    {
    oldGanttControl.call(this);
    var oldInit = this.Init;
    this.Init = function(jsGridControl, jsRawGridData, params)
    {
    oldInit.call(this, jsGridControl, jsRawGridData, params);
    DoCustomizations(jsGridControl);
    };
    };
    },"SPGantt.js");


    function DoCustomizations(grid) 
    {
    // Set the Splitter and Zoom Levels
    grid.SetSplitterPosition(725);
    grid.SetGanttZoomLevel(grid.GetGanttZoomLevel()+2);
    }

    </script>

答案#1 /更新3的结果

我决心昨天解决这个问题,但是唉....我试过没有结果让功能正常工作。我搜索,阅读,研究,无济于事。似乎选择器语句的语法变化很大,所以我不确定我是否有语法错误或CEWP问题以及它是否生成函数。我试过的一些变化:

$('th[title="Title"]').css("width", "450px","important"); 
$('th[title="Title"]').css("width", "450px", "important");
$('th[title="Title"]').css('width', '450px', 'important');
$('th [title="Title"]').css("width", "450px", "important");
$("th [title='Title']").css("width", "450px", "important");  

然后继续......所以我想我还有一些问题,我将不得不让它撒谎......

1)我是否可能没有引用正确的JavaScript源库?无论我引用哪个库或我使用的代码,脚本都不会显示失败或语法问题,但也不起作用。目前我引用了这个....

<script src="http://code.jquery.com/jquery-latest.js"></script>

2)SharePoint CEWP是否会以某种方式干扰JQuery编辑?我在另一篇文章中读到(再也找不到了);在编辑之前页面没有完全呈现的地方????

更新4信息

我将逻辑更改为以下内容以尝试确保....没有区别

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">  

$(function()  
{  
   $(document).ready(function() {
    //Get the th that has a title attribute and it contains the value Title 
    $('th[title="Title"]').css("width", "450px","important");  
    });
});
</script>

4 个答案:

答案 0 :(得分:2)

最后得到了它......下面的最终脚本完成了我需要的所有操作(以供将来参考)。非常感谢你和我一起帮助我。您的逻辑和我的代码上的一些语法清理的组合,我们得到了解决。再次感谢,如果没有帮助,我会挣扎很多天!

<script src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
JSRequest.EnsureSetup();
    //ensure document is ready
    $(document).ready(function() 
    {
        ExecuteOrDelayUntilScriptLoaded(function() 
        { 
            var oldGanttControl = SP.GanttControl; 
            SP.GanttControl = function() 
            { 
                oldGanttControl.call(this); 
                var oldInit = this.Init; 
                this.Init = function(jsGridControl, jsRawGridData, params) 
                { 
                    oldInit.call(this, jsGridControl, jsRawGridData, params); 
                    DoCustomizations(jsGridControl); 
                }; 
            }; 
        },"SPGantt.js"); 
    });

    function DoCustomizations(grid) 
    {
        grid.SetSplitterPosition(725); //set the splitter position
        grid.SetGanttZoomLevel(grid.GetGanttZoomLevel()+2); //set the zoom level
        $("th[title='Title']").css("width", "450px","important"); // set the column width
    }
</script>

答案 1 :(得分:0)

尝试将选择器更改为:

<script type="text/javascript"> 
$(function() 
{ 
    //Get the th that has a title attribute
    $("th[title]").css("width", "450px","important"); 
});
</script>

<强>更新

这个css reference sheet是否包含对您需要的元素的引用?同时检查选择器。

另外,您可以发布生成的HTML而不是生成函数吗?

更新两个

好的,基于生成的代码,我在jsfiddle中做了一个结构示例,并且我还将important添加到css属性中以确定是否可行。虽然您可能需要更改示例以使其适用于您(th中有div,因此您可能需要将这些div更改为)我正在再次更新代码,以便您可以尝试这样做(更改了Tt的{​​{1}}。

更新三

谢谢你,知道我知道你不需要元素只有title属性,但它包含title。有很多选项可以找到属性值,但我通常使用这三个:

  

描述:选择具有指定属性的元素,其值等于给定字符串或以该字符串后跟连字符( - )开头。

  

描述:选择具有指定属性的元素,其值包含给定的子字符串。

  

描述:选择具有指定属性的元素,其值完全等于某个值。

在我们的具体情况下,我建议你使用第三个选项。我打算写一个新的块代码来保留这篇文章的历史。

[attr="value"]

希望现在终于解决了。

更新四

将jquery代码放入jquery文档中吗?

更新五

我一直在阅读使用<script type="text/javascript"> $(function() { //Get the th that has a title attribute and it contains the value Title $('th[title="Title"]').css("width", "450px","important"); }); </script> 可能存在冲突,因此请尝试使用$

jQuery

答案 2 :(得分:0)

SharePoint中的TH标记不包含标题属性。

答案 3 :(得分:0)

这可能只是对BryanB的答案的评论,但是我缺乏声誉,我相信其他人也会从中受益,所以这里也是如此。

我使用了BryanB发布的解决方案,但是只更改css宽度并没有改变网格存储的内部宽度。这导致了不同的问题:

  1. 您可以选择排序的列下拉列表未从原始的100px默认位置移动
  2. 通过拖动调整列的宽度时,它会跳转到原始的100px默认位置,然后正常调整。
  3. 解决方案是在初始化网格之前调整jsRawGridData变量中的列宽。我只能使用直接数组引用,但是标题在那里,所以最坏的情况是一个简单的循环允许你按列标题而不是位置设置宽度。

    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript">
    JSRequest.EnsureSetup();
        //ensure document is ready
        $(document).ready(function() 
        {
            ExecuteOrDelayUntilScriptLoaded(function() 
            { 
                var oldGanttControl = SP.GanttControl; 
                SP.GanttControl = function() 
                { 
                    oldGanttControl.call(this); 
                    var oldInit = this.Init; 
                    this.Init = function(jsGridControl, jsRawGridData, params) 
                    { 
                        FixColumnWidth(jsRawGridData);
                        oldInit.call(this, jsGridControl, jsRawGridData, params); 
                        DoCustomizations(jsGridControl); 
                    }; 
                }; 
            },"SPGantt.js"); 
        });
    
        function FixColumnWidth(data)
        {
            data.Columns[1].width=450;
        }
    
    
        function DoCustomizations(grid) 
        {
            grid.SetSplitterPosition(725); //set the splitter position
            grid.SetGanttZoomLevel(grid.GetGanttZoomLevel()+2); //set the zoom level
        }
    </script>