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

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

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

实施datapicker jqgrid时出错

1 个答案: