实施数据选择器jqgrid时出错

Question

我正在尝试实现数据选择器，但出现此错误：

TypeError: $(...).datepicker is not a function

我的图书馆：

  <!-- for datapicker -->
    <script src="{% static 'jquery-ui/jquery-1.12.4.js' %}"></script>
    <script src="{% static 'jquery-ui/jquery-ui.js' %}"></script>
    <script src="{% static 'jquery-ui/datepicker.js' %}"></script>
    <link href="{% static 'jquery-ui/jquery-ui.css' %}" rel="stylesheet">
<!-- for jqgrid-->
<script src="{% static 'jqgrid/js/i18n/grid.locale-es.js' %}"></script>
<script src="{% static 'jqgrid/js/jquery.jqGrid.min.js' %}"></script>
<link href="{% static 'jqgrid/css/ui.jqgrid.css' %}" rel="stylesheet">
<link href="{% static 'jqgrid/css/jquery-ui.css' %}" rel="stylesheet">

我的格码：

    var mydata =
    [
        { detalle: "comprar uniformes", plazo: "2007-10-01", responsable: "Diego Avila" },
    ]

$("#grid_plan_accion").jqGrid({
    datatype: 'json',
    data: mydata,
    colNames: ['example1', 'example2', ' example3'],
    colModel: [
        { label: 'detalle', name: 'detalle', width: 150, sorttype: "string", editable: true },
        { label: 'plazo', name: 'plazo', width: 150, sorttype: "string", editable: true, edittype:"text", 
        editoptions: {
            // dataInit is the client-side event that fires upon initializing the toolbar search field for a column
            // use it to place a third party control to customize the toolbar
            dataInit: function (element) {
                $(element).datepicker({
                    id: 'orderDate_datePicker',
                    //dateFormat: 'M/d/yy',
                    dateFormat: 'yy/M/d',
                    //minDate: new Date(2010, 0, 1),
                    maxDate: new Date(2020, 0, 1),
                    showOn: 'focus'
                });
            }
        }
        },
        { label: 'responsable', name: 'responsable', width: 150, sorttype: "string", editable: true },
    ],
    rowNum: 10,
    width:750,
    height: 100,
    shrinkToFit: true,
    pager: '#pager_plan_accion',
    editurl: "clientArray",
    onSelectRow: function(id){
        var lastSel="";
        if(id && id!==lastSel){ 
           jQuery('#grid_plan_accion').restoreRow(lastSel); 
           lastSel=id; 
        }
        jQuery('#grid_plan_accion').editRow(id, true); 
    },

});
for (var i = 0; i <= mydata.length; i++)
    jQuery("#grid_plan_accion").jqGrid('addRowData', i + 1, mydata[i]);

});

这是我的网格和错误中的一个小捕获：

这是我的结构文件夹

我在本地工作并在线编辑，但不要在点击行上显示数据选择器请任何建议.. 或者我的错误是什么，谢谢 ??

Answer 1

你的代码有一些错误：

你定义的 JS 库和 css 不正确。

首先，您包括 jquery-ui.js，该模块已经包含数据选择器（以防您使用完整下载）。不需要包含 jquery-ui/datepicker.js 它会使代码加倍。此外，您两次包含 jquery css 并且可以看到第二条路径不存在。要解决此问题，请确保您已下载完整的 jQuery UI 并执行

<script src="{% static 'jquery-ui/jquery-1.12.4.js' %}"></script>
<script src="{% static 'jquery-ui/jquery-ui.js' %}"></script>
<link href="{% static 'jquery-ui/jquery-ui.css' %}" rel="stylesheet">
<!-- for jqgrid-->
<script src="{% static 'jqgrid/js/i18n/grid.locale-es.js' %}"></script>
<script src="{% static 'jqgrid/js/jquery.jqGrid.min.js' %}"></script>
<link href="{% static 'jqgrid/css/ui.jqgrid.css' %}" rel="stylesheet">

第二个错误是您使用 data 网格参数和 maydata 数组自动填充网格，第二次调用 addowdata 以再次插入此数据。

确保您加载的模块也有正确的路径。

实施数据选择器jqgrid时出错

error on implement datapicker jqgrid

javascript

jqgrid

datapicker