Question

在我的jqgrid中需要一个用于EntryDate的弹出日期选择器。但是没有错误

<script type="text/javascript"> 
    jQuery("#Countrylist").jqGrid({
        url: '/Country/GetAllCountries/',
        datatype: 'json',
        mtype: 'GET',
        colNames: ['EntryDate','EntryBy'],
        colModel: [
         {
             name: 'EntryDate', index: 'EntryDate', width: 90, editable: true,
             editoptions: {
                 dataInit: function (el)
                 { setTimeout(function () { $(el).datepicker(); }, 200); }
             }
         },
          { name: 'EntryBy', index: 'EntryBy', width: '200', align: 'center', editable: true, editable: true }

        ],
        editurl: "/Country/Edition",
        }); jQuery("#Countrylist").jqGrid('navGrid', '#Countrypager',
    { edit: true, add: true, del: true, search: false, refresh: true },
             {
                 closeOnEscape: true, reloadAfterSubmit: true,
                 closeAfterEdit: true, left: 450, top: 300, width: 520
             },
             { closeOnEscape: true, reloadAfterSubmit: true, left: 450, top: 300, url: "/Country/Deletion", mtype: "POST" },
            { closeOnEscape: true, reloadAfterSubmit: true, left: 450, top: 300 });
  });
    </script>

在我的布局页面中，我有以下参考

<link href="~/Scripts/jquery.jqGrid-4.5.2/css/ui.jqgrid.css" rel="stylesheet" />
        <link href="~/Scripts/pepper-grinder/jquery.ui.theme.css" rel="stylesheet" />
        <script src="~/jquery-ui-1.9.2.custom/js/jquery-1.8.3.js"></script>
        <script src="~/jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.min.js"></script>
        <script src="~/jquery-ui-1.9.2.custom/development-bundle/ui/jquery.ui.datepicker.js"></script>
        <script src="~/Scripts/jquery.jqGrid-4.5.2/src/jquery.jqGrid.js"></script>
        <script src="~/Scripts/jquery.jqGrid-4.5.2/src/i18n/grid.locale-en.js"></script>
        <script src="~/Scripts/jquery.jqGrid-4.5.2/src/jquery.jqGrid.js"></script>
        <script src="~/Scripts/jquery.jqGrid-4.5.2/src/jqModal.js"></script>
        <script src="~/Scripts/jquery.jqGrid-4.5.2/src/jqDnR.js"></script>

firebug显示以下错误

$（...）。datepicker不是函数

但是我可以看到datepicker在firebugs网络标签中成功加载

Answer 1

在这种情况下，您需要等到所有内容都加载为止

$(function () {
   jQuery("#Countrylist").jqGrid({ 
        url: '/Country/GetAllCountries/',
        datatype: 'json',
        mtype: 'GET',
        colNames: ['EntryDate','EntryBy'],
        colModel: [
         {
             name: 'EntryDate', index: 'EntryDate', width: 90, editable: true,
             editoptions: {
                 dataInit: function (el)
                 { setTimeout(function () { $(el).datepicker(); }, 200); }
             }
         },
          { name: 'EntryBy', index: 'EntryBy', width: '200', align: 'center', editable: true, editable: true }

        ],
        editurl: "/Country/Edition",
        }); jQuery("#Countrylist").jqGrid('navGrid', '#Countrypager',
        { edit: true, add: true, del: true, search: false, refresh: true },
             {
                 closeOnEscape: true, reloadAfterSubmit: true,
                 closeAfterEdit: true, left: 450, top: 300, width: 520
             },
             { closeOnEscape: true, reloadAfterSubmit: true, left: 450, top: 300, url: "/Country/Deletion", mtype: "POST" },
            { closeOnEscape: true, reloadAfterSubmit: true, left: 450, top: 300 });
   });
});

编辑：您可以在http://api.jquery.com/ready/

获取更多信息

Answer 2

我过去做过他的事 http://jsfiddle.net/Yenros/bbPeP/

对不起......但是我在很长一段时间内没有使用过这个组件，但代码仍然是相关的

   initDateEdit = function (elem) {
            setTimeout(function () {
                $(elem).datepicker({
                    dateFormat: 'dd-M-yy',
                    ...
                });
            }, 100);
        };

然后在你的col模型中

{ name: 'Week_Start', formatter: 'date', formatoptions: { newformat: 'd-M-Y' }, datefmt: 'd-M-Y', editoptions: { dataInit: initDateEdit }, searchoptions: { dataInit: initDateSearch } }

Answer 3

我刚刚删除了

@Scripts.Render("~/bundles/jquery")

从我的layout.cshml

现在

$(function () {
        jQuery("#Countrylist").jqGrid({**mycode**})});

如 @TheCodeDestroyer告诉..现在正在工作

jqgrid asp.net mvc中的日期选择器

3 个答案: