jqGrid的 - 编辑从未得到函数称为 [英] jqGrid - edit function never getting called

问题描述

我在使用ASP.NET MVC与jqGrid的一个问题。我试图按照这个的例子（你去那个链接后，过在页面的左侧，请单击实时数据处理，然后编辑行），但我的编辑功能是从来没有得到所谓的（也就是说，它是从来没有渐入 $（＃bedata）。点击（函数（）。有谁知道可能是什么问题？

 ＆LT;脚本类型=文/ JavaScript的＆GT;
        VAR lastsel2;        jQuery的（文件）。就绪（函数（）{
            jQuery的（＃Editgrid的）。jqGrid的（{
                网址：'/主页/ GetMovieData /'，
                数据类型：JSON，
                MTYPE：'GET'，
                colNames：ID，电影名称，导演，发布日期，IMDB评分'，'情节'，'IMAGEURL']，
                colModel：
                  {名称：'身份证'，索引：'ID'，宽度：55，排序：假的，隐藏的：真正的，可编辑的：假的，editoptions：{只读：真的，尺寸：10}}，
                  {名称：'电影名称'，索引：名称，宽度：250，可编辑：真正的，editoptions：{尺寸：10}}，
                  {名称：'导演'，索引：'导演'，宽度：250，排列：右，可编辑：真正的，editoptions：{尺寸：10}}，
                  {名称：发布日期，索引：RELEASEDATE'，宽度：100，排列：右，可编辑：真正的，editoptions：{尺寸：10}}，
                  {名称：'IMDB评分'，索引：IMDBUserRating'，宽度：100，排列：右，可编辑：真正的，editoptions：{尺寸：10}}，
                  {名称：'情节'，索引：'情节'，宽度：150，隐藏的：假的，可编辑：真正的，editoptions：{大小：30}}，
                  {名称：'IMAGEURL'，索引：IMAGEURL'，宽度：55，隐藏的：真正的，可编辑的：假的，editoptions：{只读：真的，尺寸：10}}
                ]
                寻呼机：jQuery的（'＃寻呼机），
                的rowNum：5，
                rowList：[5，10，20]，
                sortname：'ID'，
                排序顺序：递减，
                高度：100％，
                宽度：'100％'，
                viewrecords：真实，
                imgpath：'/内容/ jqGridCss /雷蒙德/图像，
                标题：从2008年电影，
                editurl：'/主页/ EditMovieData /'，
                标题：电影榜
            }）;
        }）;        $（＃bedata）。点击（函数（）{
            变种克= jQuery的（＃Editgrid的）的jqGrid（'getGridParam'，'selrow'）;
            如果（GR！= NULL）
                jQuery的（＃Editgrid的）的jqGrid（'editGridRow'，GR，{身高：280，reloadAfterSubmit：假}）;
            其他
                警报（嘿白痴，请选择行）;
        }）;
    ＆LT; / SCRIPT＆GT;
 

有关HTML是在这里：

 ＆LT;表ID =Editgrid的＆GT;
＆LT; /表＆gt;
＆LT; D​​IV ID =寻呼机的风格=文本对齐：中心;＆GT;
＆LT; / DIV＆GT;
＆LT;输入类型=按钮ID =bedata值=编辑选择/＆GT;
 

解决方案

由于我没有看到它在你的例子code，你需要jQuery的准备中调用所有这一切都来自事件：

 的jQuery（文件）。就绪（函数（$）{    VAR lastsel2;    jQuery的（文件）。就绪（函数（）{
    ...
}）;
 

否则之前的DOM准备好，这可以解释为什么你的点击处理程序永远不会成立。

您code可被执行

I'm having a problem with JQGrid using ASP.NET MVC. I'm trying to follow this example (after you go to that link, over on the left side of the page please click Live Data Manipulation, then Edit Row), but my edit function is never getting called (i.e. it's never getting into the $("#bedata").click(function(). Does anyone know what could be the problem?

    <script type="text/javascript">
        var lastsel2;

        jQuery(document).ready(function() {
            jQuery("#editgrid").jqGrid({
                url: '/Home/GetMovieData/',
                datatype: 'json',
                mtype: 'GET',
                colNames: ['id', 'Movie Name', 'Directed By', 'Release Date', 'IMDB Rating', 'Plot', 'ImageURL'],
                colModel: [
                  { name: 'id', index: 'Id', width: 55, sortable: false, hidden: true, editable: false, editoptions: { readonly: true, size: 10} },
                  { name: 'Movie Name', index: 'Name', width: 250, editable: true, editoptions: { size: 10} },
                  { name: 'Directed By', index: 'Director', width: 250, align: 'right', editable: true, editoptions: { size: 10} },
                  { name: 'Release Date', index: 'ReleaseDate', width: 100, align: 'right', editable: true, editoptions: { size: 10} },
                  { name: 'IMDB Rating', index: 'IMDBUserRating', width: 100, align: 'right', editable: true, editoptions: { size: 10} },
                  { name: 'Plot', index: 'Plot', width: 150, hidden: false, editable: true, editoptions: { size: 30} },
                  { name: 'ImageURL', index: 'ImageURL', width: 55, hidden: true, editable: false, editoptions: { readonly: true, size: 10} }
                ],
                pager: jQuery('#pager'),
                rowNum: 5,
                rowList: [5, 10, 20],
                sortname: 'id',
                sortorder: "desc",
                height: '100%',
                width: '100%',
                viewrecords: true,
                imgpath: '/Content/jqGridCss/redmond/images',
                caption: 'Movies from 2008',
                editurl: '/Home/EditMovieData/',
                caption: 'Movie List'
            });
        });

        $("#bedata").click(function() {
            var gr = jQuery("#editgrid").jqGrid('getGridParam', 'selrow');
            if (gr != null)
                jQuery("#editgrid").jqGrid('editGridRow', gr, { height: 280, reloadAfterSubmit: false });
            else
                alert("Hey dork, please select a row");
        });            
    </script>

The relevant HTML is here:

<table id="editgrid">
</table>
<div id="pager" style="text-align: center;">
</div>
<input type="button" id="bedata" value="Edit Selected" />

解决方案

Since I do not see it in your example code, you need to call all of this from within the jQuery ready event:

jQuery(document).ready(function($) {

    var lastsel2;

    jQuery(document).ready(function() {
    ...
});

Otherwise your code may be executed before the DOM is ready, which may explain why your click handler never gets set up.

这篇关于jqGrid的 - 编辑从未得到函数称为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！