jQuery 修改 SharePoint 2010 列宽

Question

我觉得这是一个补救性的问题，但我已经奋斗了好几天了……所以请原谅我。我正在 SharePoint 2010 中工作，并在甘特 View 中有一个任务列表。该列表有 6 列以及甘特图。这些任务与 Microsoft Project 2010 同步(创建)。由于列宽在 SharePoint 中不持久，我希望第 2 列(标题)的默认宽度为 450px(应该足够简单......对吧？)。我已经使用 CEWP 尝试了许多 jquery 选项来尝试设置此列宽度。我认为这看起来会更容易……有人可以帮助我确定我在哪里偏离了轨道吗？我一直在互联网上寻找，直到浏览器无法再忍受......任何帮助将不胜感激。

我尝试过的选项:它们似乎都不起作用...我将它们放在库中的文本文件中(链接到 CEWP)，脚本正在运行，因为我可以设置分割器位置和缩放级别...只是不是列的宽度。

选项#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>

Answer 1

终于搞定了......最终的脚本如下，它完成了我需要的所有操作(供其他人将来引用)。非常感谢你和我在一起并帮助我。结合您的逻辑和我的代码上的一些语法清理，我们解决了这个问题。再次感谢，如果没有帮助，我还会挣扎很多天!

<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>