Ng-table: لا يقوم tableParams.reload () بإعادة تحميل بيانات التصفية

تم إنشاؤها على ٢٧ يناير ٢٠١٤  ·  30تعليقات  ·  مصدر: esvit/ng-table

أنا أستخدم tableParams.reload () (و params.total (filteredData.length)) الذي يعيد تحميل الجدول بالبيانات الخارجية الجديدة ، لكن التحديدات في عوامل التصفية "select" و "select-multiple" لا تتغير. يجب أن يقوم tableParams.reload () باستدعاء وظائف "تصفية البيانات" مرة أخرى ، أليس كذلك؟ هل هناك طريقة أخرى لإنجاز هذا؟

التعليق الأكثر فائدة

يتم تحميل بياناتي بنجاح على DOM ولكن عندما أحضر البيانات من الخادم وأريد تحديث جدول ng بواسطة tableParams.reload () ، لا يعكس ذلك النتيجة ، ولكن عندما أقوم بالنقر فوق الفرز أو الترحيل ، فإنه يعكس النتيجة.
ما هو الموضوع الذي يمكن أن يكون هذا؟

ال 30 كومينتر

أهلا. بادئ ذي بدء - شكرا على المشروع.
لدي نفس المشكلة. أحتاج إلى تحديث عوامل التصفية بالبيانات التي تم جلبها من الخادم ، ولكن ليس لدي أي فكرة عن كيفية تشغيل وظيفة تصفية البيانات.

لقد وجدت أنه إذا قمت بتصريح بياناتك مباشرة داخل وظيفة getData ، فيبدو أنه يتم تحديث الجدول.
إذن ..... getData: function ($ defer، params) {
var data = $ range.yourdata ؛
var orderData = ..................................
}

يتم تحميل بياناتي بنجاح على DOM ولكن عندما أحضر البيانات من الخادم وأريد تحديث جدول ng بواسطة tableParams.reload () ، لا يعكس ذلك النتيجة ، ولكن عندما أقوم بالنقر فوق الفرز أو الترحيل ، فإنه يعكس النتيجة.
ما هو الموضوع الذي يمكن أن يكون هذا؟

أود أن أوافق على ما اقترحه @ basilcronus ، فقد

واجهت نفس المشكلة معdevelopersatish.
انتظر حلا لهذه المشكلة.

مرحبا جميعا. لقد بدأت مؤخرًا في استخدام ngTable. لدي مشكلة مماثلة خاصةً مع جداول ngTable المتداخلة وإعادة تحميل البيانات المنفصلة عن البيانات الأصلية. هذه فكرة سريعة:

تحكم الوالدين:

var parentData = [...] ؛

تفاصيل النطاق دولار = -1

$ scale.showDetails = الوظيفة (المعرف) {
نطاق $.details = معرف ؛
} ؛

// ngTable ////////
$ domain.tableParams = جديد ngTableParams ({
الصفحة: 1 ، // إظهار الصفحة الأولى
العد: 10 ، // العد لكل صفحة
فرز: {
المعرّف: "تصاعدي" // الفرز الأولي
}
} ، {
الإجمالي: parentData.length ، // طول البيانات
getData: function ($ defer، params) {
// استخدم المرشح الزاوي المدمج
var orderData = params.sorting ()؟
مرشح $ ('orderBy') (parentData، params.orderBy ()):
بيانات الوالدين ؛
defer.resolve $ (orderData.slice ((params.page () - 1) * params.count ()، params.page () * params.count ())) ؛
}
}) ؛

على html لدي نقرة نانوغرافية لإرسال المعرف إلى هذا وتغيير نطاق التفاصيل.

وحدة تحكم الطفل (الجدول الثانوي الذي يتعلق بأول وحدة تحكم):

var childData = [...] ؛

$ domain. $ parent. $ watch ('details'، function () {
console.log ("لقد جعلتها هنا") ؛
domain.tableParams2.reload () $؛
}) ؛

// child ngTable ////////
$ scale.tableParams2 = ngTableParams جديد ({
الصفحة: 1 ، // إظهار الصفحة الأولى
العد: 10 ، // العد لكل صفحة
فرز: {
المعرّف: "تصاعدي" // الفرز الأولي
}
} ، {
المجموع: childData.length ، // طول البيانات
getData: function ($ defer، params) {
// استخدم المرشح الزاوي المدمج
var orderData = params.sorting ()؟
filter $ ('orderBy') (childData، params.orderBy ()):
بيانات الطفل ؛
defer.resolve $ (orderData.slice ((params.page () - 1) * params.count ()، params.page () * params.count ())) ؛
} ،
النطاق $: {$ data: {}}
}) ؛

يمكنني رؤية التغيير عند النقر ولكن لا يتم تحديث جدول طفلي. لست متأكدًا مما إذا كان هذا مفيدًا ، لكنني أعتقد أنه مرتبط بذلك.

مرحبا،
لدي أيضًا نفس المشكلات مثلdevelopersatish. يتم تحديث بيانات الجدول فقط بعد فرز الجدول أو تصفيته. هل هناك أي حل لهذه القضية؟

عندى نفس المشكلة.

في حدث النقر ، أبدأ في استرداد البيانات من الخادم (مكالمات متعددة).
لذلك لدي حلقة for وفيها لدي طلبات GET وأقوم بتخزين النتائج التي تعود إلى متغير النطاق الذي أريد رسمه في جدول غير متزامن.

ومع ذلك ، عند النقر ، أقوم بإنشاء مثيل للجدول الخاص بي على النحو التالي:

`$scope.tableParams = new ngTableParams({
        page: 1, // show first page
        count: 10, // count per page
        sorting: {
            Country: 'asc' // initial sorting
        }
    }, {
        total: $scope.continentTableData.length, // length of data
        getData: function($defer, params) {
            for (var i = 0; i < numberOfCountries; i++) {
                try {
                    var country = $("path[class*=" + $scope.currentContinentCountries[i].toUpperCase() + "]")[0].__data__.properties.name;
                    MapService.getInfographicsData(2013, country, function(infrographicsData) {
                        counter++;
                        // debugger;
                        var cpi = infrographicsData[0].data.CPI;
                        var trace = infrographicsData[1].data;
                        var countryName;

                        if (cpi == null) {
                            countryName = trace.Ref_Country;
                        } else {
                            countryName = cpi.Country;
                        }

                        var joinedData = {
                            Country: countryName,
                            Cpi: cpi,
                            Trace: trace
                        }
                        $scope.continentData.push(joinedData);

                        $scope.continentTableData = $scope.continentData;

                        // if (counter==numberOfCountries-1) {
                        //     console.log("tier");
                            $timeout(function() {
                            // update table params
                            params.total($scope.continentTableData.length);
                            // set new data
                            console.log("new data set");
                            $defer.resolve($scope.continentTableData);
                        }, 1500);
                        // };

                    });
                } catch (e) {
                    // console.log(e);
                    continue;
                }                    
            }

            // $scope.$apply();
        }
    });`

كما في مثال ngTable مع ajax. ومع ذلك ، لم يتم عرض أي شيء في الجدول (لا يتم استدعاء getData مطلقًا.)

إذا قمت بالنقر فوق "تحديث" tableParams ، فسيبدأ الجدول في تحميل كل شيء باستثناء أن كل عنصر مكرر.

اي فكرة؟

developersatish لقد تمكنت من عكس البيانات الجديدة من الخادم عن طريق نسخ الوظيفة المرفقة بأزرار ترقيم الصفحات.

$scope.tableParams.count(1);

لقد وضعت هذا في رد الاتصال لطلبي.

myRequest().then(function(response) {
    $scope.data = response;
    $scope.tableParams.total($scope.data.length);
    $scope.tableParams.count(1);
});

تعديل:

في رسالتي الأصلية ، يجب استبدال 1 في $scope.tableParams.count(1) بمتغير يحتوي على القيمة المعينة على count في ngTableParams .
راجع http://embed.plnkr.co/harWG3J6OlNHzbOu0e6S/preview للحصول على مثال عملي.

نظرًا لأن هذه هي أفضل نتيجة بحث لهذه المشكلة ، فسوف أدرج ما فعلته من أجل الحل الخاص بي. لقد قمت ببساطة بتخزين مصفوفة العناصر {id، title} في نطاق $ الخاص بي والتي تُستخدم كوسيطة لـ defer.resolve في دالة تصفية البيانات. (قد يكون / ربما يكون فارغًا في البداية.) يمكنك بعد ذلك تحديث هذه المصفوفة في أي وقت وستنعكس التغييرات في تحديد عامل التصفية. لذلك أقوم بتحديثه عندما يعيد اتصال ajax الخاص بي استجابة الخادم.

أيضًا في حالتي ، يتم توسيع مجموعة بيانات الجدول (يتم زيادتها) حيث يقوم المستخدم بتوسيع نطاق البحث. هذا يتطلب أن أقوم أيضًا بتعديل (تطبيق فرق على) المرشحات المحددة.

لقد جربت ذلك ولكنه لم ينجح. هل يمكنك لصق مثال العمل الخاص بك؟

مرحبا شباب،
لدي نفس المشكلة مثل almaplayera ، لدي سيناريو شيء مثل

1. تأتي بيانات التصفية المستخدمة في القائمة المنسدلة من الخدمة

2. ولتحديث نفس البيانات لدي قسم حيث يمكن للمستخدم إضافة إدخالات جديدة / تحديث القائمة.

3. بعد إضافة / تحديث الإدخالات من إضافة / تعديل بيانات التصفية للقائمة المنسدلة ، يجب تحديث هذه القائمة المنسدلة بمجرد إعادة تحميل الجدول.

أفعل ذلك للحصول على بيانات شركتي لتصفية البيانات -

screen4ngtable

بعد ذلك قمت باستدعاء طريقة getCompany في تصفية بيانات وجهة نظري -

screen5ngtable

هل يمكن لأي شخص أن يقترح أي حلول لتحديث بيانات التصفية الخاصة بي بالبيانات الحديثة من الخدمة أو تقديم بعض الأمثلة لحالة الاستخدام المتشابهة.

esvit : لقد حاولت الحصول على بياناتي من getData callback في ngTablePrams وربطها بنطاق $ بعد ذلك حاولت تمرير نفس المتغير لتصفية البيانات في عرض شيء مثل israelidanny المقترح في https://github.com/esvit / ng-table / pull / 342 لكن هذا أيضًا لا يعمل بالنسبة لي. :(

ملاحظة: أنا أفعل tableParams.reload () ؛ بعد الإضافة والتحرير.

لم يعد لدي الكود الخاص بي لأنني ابتعدت عن الجدول الزمني قبل أن ألتزم بأي شيء. ومع ذلك ، من الذاكرة:

يتم استدعاء وظائف المرشح (دالة getCompany الخاصة بك) مرة واحدة فقط في الجدول الأولي. لذلك عليك تطبيق التغييرات على مصفوفة البيانات التي تم حلها كلما كانت هناك تغييرات في السجل وسيقوم الزاوي بتطبيق هذه التغييرات على dom.

$scope.company_filter = [];

$scope.getCompanyFilter = function(data) {
  var def = $q.defer();
  companyService.getAll().success(function(response) {
    $scope.updateCompanyFilter(response.data);
    def.resolve($scope.company_filter);
  });
  return def;
};

$scope.updateCompanyFilter = function(data) {
  $scope.company_filter.length = 0;
  for (i in data) {
    $scope.company_filter.push({
        'id': data[i].id,
        'title': data[i].name
    });
  }
};

// Then wherever you refresh your table data, just call updateCompanyFilter(data).
// Or you could micro manage the filter array when you do adds/deletes instead of reseeding it every time.

<td ... filter-data="getCompanyFilter($column)" >

مرة أخرى ، قد أكون مخطئًا منذ بضعة أشهر.

هل تم إصلاح هذه المشكلة في أحدث إصدار من جدول المنظمات غير الحكومية؟

هل يمكن لشخص ما أن يقدم مثالا على الكود

أنا لا أعتقد أنه هو.

الآن ، لا أعتقد أنه سيكون من الصعب جدًا إنشاء ملف
تتوفر وظيفة controller.loadFilterData ليتم استدعاؤها من ملف
tabl ستتمكن بعد ذلك من الاتصال بهذا عندما تتغير القوائم
تطبيقك.

ج

يوم الجمعة ، 19 حزيران (يونيو) 2015 الساعة 6:59 صباحًا ، rachithaShetty [email protected]
كتب:

هل تم إصلاح هذه المشكلة في أحدث إصدار من جدول المنظمات غير الحكومية؟

-
قم بالرد على هذا البريد الإلكتروني مباشرة أو قم بعرضه على GitHub
https://github.com/esvit/ng-table/issues/186#issuecomment -113384084.

: +1: @ kyleboyle : الحل الخاص بك نجح معي ..! روعة ...! شكرا جزيلا.

يبدو أنه تم دمج حل هذه المشكلة (طلب السحب 403: https://github.com/esvit/ng-table/pull/403) في الإصدار 0.4.2 ، ولكن تم التراجع عن التغيير الذي أجراه منذ ذلك الحين.

على السطر 549 من تغيير ng-table.js

$ scale. $ watch ('params. $ params'، function (newParams، oldParams) {
ل
$ scale. $ watch ('[params. $ params، params.data]'، function (newParams، oldParams) {

أدى هذا إلى حل مشكلة البيانات التي يتم تحديثها ، ولكن لم يتم تحديث الجدول لعرض التغييرات.
يبدو أن هذا الخطأ قد أعيد تقديمه في هذا الالتزام: https://github.com/esvit/ng-table/commit/9189e987fba90b07ffc6b17c982961ad65edf725#diff -6aca4bc06732c0635eb9860dc6cd040fL490

لسوء الحظ ، يتسبب $watch 'ing params.data حدوث مشكلات في ظروف معينة:

عندما تكون العناصر داخل params.data معقدة وتتضمن مراجع دائرية ، يتسبب $watch 'ing _by value_ في استثناء تجاوز سعة المكدس عندما ينشئ angular.copy استنساخًا عميقًا.

أعتقد أن الإصدار الأحدث من angular.copy يصلح هذه المشكلة بالذات ، ولكن لا تزال فكرة سيئة لمشاهدة params.data _ by value_ لأسباب تتعلق بالأداء.

kyleboyle هذا الرمز يعمل بشكل مثالي! شكرا! ويمكن أن تؤدي إضافة وظيفة inArray إلى تصفية التكرارات.

    $scope.manufacturer_filter = [];
    $scope.getManufactFilter = function(column){
        var def = $q.defer();
        ResourseAPI.query(function(data){
            $scope.updateManufactFilter(data.devices);
            def.resolve($scope.manufacturer_filter);
        });
        return def;
    };
    $scope.updateManufactFilter= function(data) {
        var arr = [];

        angular.forEach(data, function (item) {
            if (inArray(item.manufacturer, arr) === -1) {
                arr.push(item.manufacturer);
                $scope.manufacturer_filter.push({
                    'id': item.manufacturer,
                    'title': item.manufacturer
                });
            }
        });
    };

    var inArray = Array.prototype.indexOf ?
    function (val, arr) {
        return arr.indexOf(val);
    } :
    function (val, arr) {
        var i = arr.length;
        while (i--) {
            if (arr[i] === val) return i;
        }
        return -1;
    };

kyleboyle الحل الخاص بك رائع.
هل يعرف أي شخص ما إذا كان بإمكانه تنفيذ شيء مشابه ولكن باستخدام ديناميكي الجدول ng؟
أقوم بتحميل الأعمدة ديناميكيًا عن طريق جافا سكريبت.

مثال:

var column = {
    title: 'Example',
    sortable: 'example',
    filter: 'example',
        filterData: .....,
    show: true,
    field: 'example'
};

ما الذي يجب تعيين خاصية تصفية البيانات؟ أم أن هناك طريقة أخرى لإعادة تحميل مرشحات البيانات؟

هناك العديد من الطرق المختلفة لتحديد المصفوفة التي سيستخدمها عامل التصفية المحدد كمصدر بيانات. تنطبق كل طريقة من هذه الطرق على كل من ng-table و ng-table-dynamic .

ربما يمكن أن تساعدك عينة التعليمات البرمجية التالية في اكتشاف شيء ما؟

http://codepen.io/christianacca/pen/JdqjxB؟editors=101

عينة جيدة ، لكن لا يمكنني إيجاد حل لمشكلتي. في جميع الأمثلة ، يتم تحميل البيانات مرة واحدة فقط (متزامنة أو غير متزامنة) ولكن لا يتم إعادة تحميلها.

مثال على ما أحصل عليه هو:
لدي عمودين: البلدان والمدن ، كل واحد به مرشح.
لذا:

  • عندما يكون مرشح البلد فارغًا ، يطلب من الخادم جميع المدن.
  • عند تحديد مرشح الدولة ، اطلب من الخادم أن تكون المدينة الوحيدة التي تنطبق عليها تلك الدولة وحدّث عمود تصفية بيانات المدن.

إنه مفهوم؟ اسف للغتى الانجليزيه.

شكرا على الرد.

kyleboyle لا أعتبره علامة على ضعف جودة الكود الذي لا يتم تحديثه في الجدول عندما تعمل البيانات الأساسية. ما حل الجدول الزاوي الذي قمت بالتبديل إليه؟

BartoGabriel أعتقد أن ما تحاول القيام به ممكن. رجل عملت معه حل المشكلة عن طريق إنشاء قالب مرشح خاص به فعل بالضبط ما قلته. لقد تجاوز نموذج select.html بطريقة مشابهة للمثال التالي: http://codepen.io/christianacca/pen/xGeWGX؟editors=101

آسف ، لا يمكنني أن أكون أكثر فائدة ، لقد دفعت الوقت فقط!

راجع للشغل ، الرجل الذي ذكرته ، استخدم ui-select2

@ كريستياناكا شكرا لمساعدتك. كانت مفيدة جدا.
عندما يكون لدي الحل سأشاركه.

رائع :-)

مرحبًا يا شباب ، هل الحل الخاص بي خاطئ تمامًا أم أن kyleboyle هو مجرد بديل أفضل؟

telwing لم يعمل الحل الخاص بك بالنسبة لي ، ولكن مرة أخرى ، لم ينجح @ kyleboyle . أنا لا أقوم في الواقع بأي تصفية ، على الرغم من ذلك. أنا فقط أقوم بفرز البيانات من مصفوفة ، نطاق المستخدمين. عندما أقوم بإزالة عنصر من هذا المصفوفة واستدعاء reload () في معلمات الجدول ، لا يحدث شيء. من المدهش حقًا أن شيئًا كهذا معقد للغاية ما لم أفقد شيئًا أساسيًا.

أواجه أيضًا نفس المشكلات التي جربتها @ developeratish.i أيضًا من إعداد tableParams لكن استدعاء دالة getdata الخاصة بي فقط عند تحميل الصفحة أثناء تصفية البيانات من خلال القائمة المنسدلة ، لا يمكنها استدعاء هذه الوظيفة

$ domain.tableParams = جديد ngTableParams ({
الصفحة: 1 ، // إظهار الصفحة الأولى
العد: 8 ، // العد لكل صفحة
فرز: {
LastSeen: 'desc' // الفرز الأولي
} ،
منقي: {
اسم المريض: '' ، // عامل التصفية الأولي
} ،
} ، {
filterSwitch: صحيح ،
getData: function ($ defer، params) {
// استخدم المرشح الزاوي المدمج
var filteredData = params.filter ()؟
عامل التصفية $ ('filter') ($ scale.items، params.filter ()):
نطاق $.

        var orderedData = params.sorting() ?
                            $filter('orderBy')(filteredData, params.orderBy()) : filteredData;
        params.total(orderedData.length); // set total for recalc pagination
        $scope.tableParams.count(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));

        $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));



    }
});
هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات