2012-03-26 147 views
0

更新:我仍然没有想通,但看到了Jquery - Jeditable: How Reset to non-editable without page refresh,看起来与我想要做的相似。试图合并它,但我不知道我做的是否正确,因为它需要2次点击(或2次Ctrl-点击)才能以我期望的方式行事。允许单击鼠标左键单击鼠标右键或按Ctrl键单击打开对话框

$( “div.wanttoedit”)。点击(函数(E){
如果(e.ctrlKey){
$( 'div.wanttoedit')。addClass( 'non_edit')。removeClass ( '编辑')解除绑定( 'click.editable');
警报( 'Ctrl键被按下');
}其他{
警报(按 'Ctrl未按');
$('格。 ('.edit').editable('http://#request.host#/vp/metrics.cfc?method = updateMetrics')。addClass('edit')。removeClass('non_edit');
$('.edit').editable & returnform在平原=);
}
});

<div id="#results.id#" class="wanttoedit non_edit">#val(value_disp)#</div>

同样,任何帮助强烈地理解。谢谢。


我对jquery/javascript/jeditable仍然很陌生,所以请尽可能的友好和明确。 :)

我有一个表的行标签=公制名称和列标签=月。单元格包含相应的度量值。我希望能够单击左键单击并使度量标准值可编辑,但也能够按住Ctrl键单击(或右键单击,按住Shift单击或其他),并且能够输入缺少度量标准的原因(如果它是)。这两件事情在我的数据库中的两个不同的表中更新,但两者都链接回它们关联的metric_id /名称和时间范围/月份。

我已经能够通过单击鼠标左键单击编辑量度值,但我一直未能找到一种方法来使字段也允许其他单击弹出对话框框中输入遗漏信息。

任何帮助将真诚地感谢,特别是如果你可以很容易地理解这个相当简单的女孩。我正在使用Coldfusion(不知道这是否是必要的知识,但认为我会提及它以防万一),并且可以根据需要提供任何代码片段以允许您帮助我解决这个问题。

这里是我的代码示例,我使用的是jquery选项卡,所以可编辑是在一个比平常更不同的地方(希望我包括你需要看到的一切...如果不只是让我知道什么我可能会丢失)

$(文件)。就绪(函数(){
$( “#cymteamtabs”)标签({
缓存:假的,
载:函数(事件, ui){
$(“.editMetric”).editable(“http://#request.host#/vp/metrics.cfc?方法= updateMetrics & returnformat =纯“);
},
ajaxOptions:{缓存:假}
}
);

<cfloop query="metrics">
<tr>
<td>#metrics.mdisplay#</td>
<cfloop query="dates">
<td id="#results.id#" class="editMetric">#val(value_disp)#</td> </cfloop>
</tr>
</cfloop>

哦,只是为了确保我是什么,我想要它做的明确....如果我在球场上按住Ctrl键单击,在弹出似乎允许的条目错过信息(编辑被禁用)。一旦该对话框关闭,如果我左键单击该字段,将启用对该字段的编辑,因此,基本上我不希望永远关闭可调度,我只是希望它在进入休眠模式之前的时间用户按住Ctrl键并单击该字段,并因此关闭弹出的对话框。

在此先感谢。

+2

如果可能,请提供您的代码的相关示例,和/或[jsFiddle](http://www.jsfiddle.net)。 – Blazemonger 2012-03-26 21:16:58

回答

0

我可以想到的排序这一点的唯一方法是一点点黑客攻击。 似乎没有要上反正所以我的建议是设置了两个事件类型,当CTRL按下

的问题是事件类型它们之间切换的情况下运行有条件的 - 他们解除绑定似乎有点过度。 最好的选择是将可编辑元素设置为<td />,因为您拥有一个单独的元素(如跨度)作为触发器。

要继续使用当前的HTML,你可以试试这个:

$('.editMetric').editable('url1', { 
    event: "nrmlClick" 
}).editable('url2', { 
    event: "ctrlClick" 
}).bind('toggleClick', function(e) { 
    if (e.ctrley) { 
     /* modal javascript here */ 
     $(this).trigger('ctrlClick') 
    } else { 
     $(this).trigger('nrmlClick') 
    } 
});​ 

我没有正确测试这个设施,但这个应该工作。

我以前从来没有创建过活动名称,所以我不知道这个想法有多好(希望有人可以启发我们),但现在看不到伤害。

希望有帮助!

+0

这很好,但是,正常的点击当然会使得点击的字段(度量值)可以编辑,但是按下ctrl-click将不得不弹出一个完全不同字段的对话框(度量失误原因)这将是可编辑的....是否有某种方式,我可以包括代码来启动弹出对话框之前触发“第二个”可编辑事件?顺便说一句,非常感谢你的帮助。 :) – 2012-03-30 15:24:29

+0

是的,这应该没问题,但我不知道你的模式是如何设置的 - 它是一个确切的重复表吗?你所需要做的就是创建模态元素并将'.editable'绑定到它。这将移动我的示例中的第二个可编辑绑定,并将更改正在触发的元素。最好的选择,因为我看到它是为表和模式完整(现在不用担心JavaScript)创建一个示例html的jsfiddle。我们可以从那里拿走它 – lnrbob 2012-03-30 16:30:09

1

我不确定这是做这件事的最好方法,也不是我肯定它正在做我想要做的事,但它到目前为止似乎工作。

$(document).ready(function() 
{ 
$("#cymteamtabs").tabs(
    { 
    cache: false, 
    ajaxOptions: {cache: false}, 
    load: function(event,ui) 
     { 
     $(".editMetric").click(function(e) { 
      if (e.ctrlKey) { 
       var metric_id = $(this).attr('data-metric-id'); 
       var date_type = $(this).attr('data-date-type'); 
       var value_date = $(this).attr('data-value-date'); 
       var url_tf = 'cym'; 
       var url_view = 'edit'; 
       scorecards.display.miss_details(metric_id,date_type,value_date,url_tf,url_view); 
       e.stopImmediatePropagation(); 
      } 
     }); 
     $(".editMetric").editable("http://<cfoutput>#request.host#</cfoutput>/vp/metricCFComponents.cfc?method=updateMetrics&returnformat=plain"); 
     } 
    }); 
}); 

这似乎首先检查Ctrl-单击,并且如果它被按下,则非jeditable代码运行和e.stopImmediatePropagation();似乎不允许它下面的可用代码运行。

相关问题