Question

我使用此jtable代码段加载jquery：

 <div id="materialSheetTable" class="box-body table-responsive no-padding">
                </div>

 $('#materialSheetTable').jtable({
            title: 'Material Sheet',
            sorting: true,
            multiSorting: true,
            selecting: true, //Enable selecting
            multiselect: true, //Allow multiple selecting
            selectingCheckboxes: true,
            paging: true,
            pageSize: 10,
            defaultSorting: 'Material_Date DESC',
            //footer: true,
            actions: {
                listAction: '/Account/MaterialSheet.aspx/GetMaterialSheetList',
                //updateAction: '/Account/MaterialSheet.aspx/EditMaterialSheetList',
                deleteAction: '/Account/MaterialSheet.aspx/DeleteMaterialSheetList',
                createAction: '/Account/MaterialSheet.aspx/AddMaterialSheetList'
            },
            formCreated: function (event, data) {
                //Validation Logic
                data.form.find('input[name="BuildingSubTask_ID"]').addClass('validate[required]');
                data.form.find('input[name="Material_ID"]').addClass('validate[required]');
                data.form.find('input[name="Quantity"]').addClass('validate[required,custom[integer]]');
                data.form.find('input[name="Rate_Per_Unit"]').addClass('validate[required,custom[integer]]');
                data.form.find('input[name="Total_Amount"]').addClass('validate[required,custom[integer]]');
                data.form.find('input[name="Vehical_No"]').addClass('validate[required,custom[onlyLetterNumberSp]]');
                data.form.find('input[name="Narration"]').addClass('validate[required]');
                data.form.find('input[name="LedgerName"]').addClass('validate[required]');
                data.form.find('input[name="Challan_No"]').addClass('validate[required,custom[onlyNumber]]');
                data.form.find('input[name="Bill_No"]').addClass('validate[custom[onlyNumber]]');
                data.form.validationEngine();

                $('.btnUpload').click(function () {
                    var fileUpload = $(".fileInput").get(0);
                    var files = fileUpload.files;
                    var test = new FormData();
                    for (var i = 0; i < files.length; i++) {
                        var currentdate = new Date();
                        var d = currentdate.getDate();
                        var m = currentdate.getMonth() + 1; // JavaScript months are 0-11
                        var y = currentdate.getFullYear();
                        var h = currentdate.getHours();
                        var mn = currentdate.getMinutes();
                        var sc = currentdate.getSeconds();
                        var fname = "Challan" + "_" + d + "_" + m + "_" + y + "_" + h + "_" + mn + "_" + sc;
                        var parts = files[i].name.split('.');

                        test.append(fname + "." + parts[parts.length - 1], files[i]);
                        FileUploaded = fname + "." + parts[parts.length - 1];
                    }
                    $.ajax({
                        url: "/Account/Upload.ashx",
                        type: "POST",
                        contentType: false,
                        processData: false,
                        data: test,
                        // dataType: "json",
                        success: function (result) {
                            swal(
                                'Success',
                                result,
                                'success'
                              );
                        },
                        error: function (err) {
                            swal(
                                  'Oops...',
                                  err.statusText,
                                  'error'
                                );
                        }
                    });
                });

                var ledgerautocomplete = $('#Edit-LedgerName').autocomplete({
                    serviceUrl: "/Account/MaterialSheet.aspx/GetAllLedger",
                    deferRequestBy: 200,
                    showNoSuggestionNotice: true,
                    autoSelectFirst: true,
                    preventBadQueries: true,
                    type: "POST",
                    dataType: "json",
                    params: params,
                    onSearchStart: function (query) {
                    },
                    onInvalidateSelection: function () {
                    },
                    onSelect: function (suggestion) {
                    }
                });
                Autosuggetion.push(ledgerautocomplete);

                $('#Edit-Material_ID').change(function () {
                    var postData = JSON.stringify({ Material_ID: $('#Edit-Material_ID').val() });
                    $.ajax({
                        type: "POST",
                        url: "/Account/MaterialSheet.aspx/GetUnitByMaterial",
                        data: postData,
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (result) {
                            $('#Edit-Unit_ID').val(result.d.Options[0].Value);
                        },
                        error: function (err) {
                            swal(
                                  'Oops...',
                                  err.statusText,
                                  'error'
                                );
                        }
                    });
                });

                function validateNumber(testnumber) {
                    if (testnumber == '0')
                        return false;
                    var number_regex = /^\d+$/
                    return number_regex.test(testnumber);
                }

                $('#Edit-Quantity,#Edit-Rate_Per_Unit').blur(function () {
                    var quantity = $('#Edit-Quantity').val() == '' ? 0 : parseFloat($('#Edit-Quantity').val());
                    var RatePerUnit = $('#Edit-Rate_Per_Unit').val() == '' ? 0 : parseFloat($('#Edit-Rate_Per_Unit').val());
                    var total = quantity * RatePerUnit;
                    $('#jtable-create-form #Add-Total_Amount').val(total);
                    $('#Edit-Total_Amount').val(total);
                });
            },
            formSubmitting: function (event, data) {
                $(".fileInput").html('<input type="text" id="FileUpload" name="FileUpload" value="' + FileUploaded + '">');
                return data.form.validationEngine('validate');
            },
            formClosed: function (event, data) {
                FileUploaded = undefined;
                data.form.validationEngine('hide');
                data.form.validationEngine('detach');
            },
            recordUpdated: function (event, data) {
            },
            rowUpdated: function (event, data) {
                if (validateDate($('#materialStartDate').val()) && validateDate($('#materialEndDate').val())) {
                    var startDate = $('#materialStartDate').val().split("/");
                    var materialStartDate = new Date(startDate[2], (startDate[1] - 1), startDate[0]);
                    var endDate = $('#materialEndDate').val().split("/");
                    var materialEndDate = new Date(endDate[2], (endDate[1] - 1), endDate[0]);

                    if (materialStartDate < materialEndDate) {
                        $('#materialSheetTable').jtable('load', { StartDate: materialStartDate, EndDate: materialEndDate });
                    }
                    else
                        $('#materialSheetTable').jtable('load', { StartDate: null, EndDate: null });
                }
                else
                    $('#materialSheetTable').jtable('load', { StartDate: null, EndDate: null });
            },
            fields: {
                MaterialSheet_ID: {
                    key: true,
                    create: false,
                    edit: false,
                    list: false
                },
                UserName: {
                    list: true,
                    title: 'User Name',
                    create: false,
                    edit: false
                },
                Material_Date: {
                    list: true,
                    title: 'Date',
                    create: false,
                    edit: false,
                    type: 'date',
                    displayFormat: 'dd/mm/yy'
                },
                BuildingTask_ID: {
                    list: true,
                    title: 'Building Task',
                    create: true,
                    edit: true,
                    options: function (data) { return '/Account/MaterialSheet.aspx/GetBuildingTasksListForDropdown'; }
                },
                BuildingSubTask_ID: {
                    list: true,
                    title: 'Building Sub Task',
                    create: true,
                    edit: true,
                    dependsOn: 'BuildingTask_ID',
                    options: function (data) { return '/Account/MaterialSheet.aspx/GetBuildingSubTaskByBuildingTask?BuildingTask_ID=' + data.dependedValues.BuildingTask_ID; }
                },
                Material_ID: {
                    list: true,
                    title: 'Material Name',
                    create: true,
                    edit: true,
                    options: function (data) { return '/Account/MaterialSheet.aspx/GetMaterialListForDropdown'; }
                },
                Quantity: {
                    list: true,
                    title: 'Quantity',
                    create: true,
                    edit: true
                },
                Unit_ID: {
                    list: true,
                    title: 'Unit',
                    //dependsOn: 'Material_ID',
                    //options: function (data) { return '/Account/MaterialSheet.aspx/GetUnitByMaterial?Material_ID=' + data.dependedValues.Material_ID; }
                    options: function (data) { return '/Account/MaterialSheet.aspx/GetQuantityUnitList'; }
                },
                Height: {
                    list: false,
                    title: 'Height',
                    create: true,
                    edit: true
                },
                Width: {
                    list: false,
                    title: 'Width',
                    create: true,
                    edit: true
                },
                MaterialSize: {
                    list: false,
                    title: 'Size',
                    create: false,
                    edit: false
                },
                Size_ID: {
                    list: false,
                    title: 'Size Unit',
                    options: function (data) { return '/Account/MaterialSheet.aspx/GetSizeUnitList'; }
                },
                Rate_Per_Unit: {
                    list: true,
                    title: 'Rate/Unit',
                    create: true,
                    edit: true
                },
                Total_Amount: {
                    list: true,
                    title: 'Total Amount',
                    create: true,
                    edit: true
                },
                Paid_Amount: {
                    list: true,
                    title: 'Paid Amount',
                    create: false,
                    edit: false
                },
                Vehical_No: {
                    list: true,
                    title: 'Vehicle No.',
                    create: true,
                    edit: true
                },
                Ledger_ID: {
                    create: true,
                    title: 'Ledger',
                    edit: true,
                    list: false,
                    options: function (data) { return '/Account/MaterialSheet.aspx/GetSundryCreditorsList'; },
                },
                LedgerName: {
                    list: true,
                    title: 'Ledger Name',
                    create: false,
                    edit: false,
                },
                Narration: {
                    list: true,
                    title: 'Narration',
                    create: true,
                    edit: true
                },
                Challan_No: {
                    list: true,
                    title: 'Challan No',
                    create: true,
                    edit: true
                },
                Bill_No: {
                    list: true,
                    title: 'Bill No',
                    create: false,
                    edit: false
                },
                Approval: {
                    list: true,
                    title: 'Approval',
                    create: false,
                    edit: false,
                    options: { 'Pending': 'Pending', 'Yes': 'Yes', 'No': 'No' }
                },

                Upload: {
                    title: 'Image',
                    type: 'file',
                    create: false,
                    edit: false,
                    list: true,
                    sorting: false,
                    display: function (data) {
                        if (data.record.isImage == 1) {
                            var $id = data.record.MaterialSheet_ID;
                            return '<a target="_blank" href="/Account/ViewImage.aspx?MaterialSheet_ID=' + $id + '">View Challan</a>';
                        }
                        else
                            return '';
                    }
                },

                image: {
                    title: 'Select File',
                    list: false,
                    create: true,
                    input: function (data) {
                        html =
                            '<input id="fileInput" class="fileInput" name="fileInput" type="file" accept="image/*" style="float: left;" /><input type="button" id="btnUpload" class="btnUpload"  value="Upload"/>';
                        return html;
                    }
                },
                Edit: {
                    list: true,
                    title: 'Edit',
                    create: false,
                    edit: false,
                    display: function (data) {
                        if (data.record.isBilled != 1) {
                            return '<a href="#" title="Edit Record" onclick="javascript : return EditMaterialSheet(' + data.record.MaterialSheet_ID + ');" class="Editchallan"><i class="fa fa-edit" style="font-size: 20px;color:green"></i></a>';
                        }
                        else {
                            return '<a title="Selected In Bill So Can Not Be Editable" class="Editchallan"><i class="fa fa-edit" style="font-size: 20px;color:#9f9f9f"></i></a>';
                        }
                    }
                },
            }
        });
        $('#materialSheetTable').jtable('load', { StartDate: null, EndDate: null });

问题是当我添加或编辑记录然后它工作正常。但是当我关闭表格然后添加或编辑记录时，这些字段无法选择。看到这里它是可编辑的。

现在关闭，然后添加新记录，然后无法选择选项或在字段中编辑

看这里不可编辑或可选择。

这里的jtable有什么问题？任何想法或建议??

在asp.net中第二次打开时，jtable表格被禁用

0 个答案: