Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   не вижу вариантов получения названия объекта для вызова его функции (https://javascript.ru/forum/events/35950-ne-vizhu-variantov-polucheniya-nazvaniya-obekta-dlya-vyzova-ego-funkcii.html)

Stakantin 27.02.2013 14:08

не вижу вариантов получения названия объекта для вызова его функции
 
Здравствуйте!
Вобщем такая проблема:
пытаюсь создать свой собственный грид (функция возвращающая объект, с данными для отрисовки и сортировки их в таблице)

var realGrid = function(GridSettings){
    var grid = new Object();
    var tmp;
    grid.id = GridSettings.id;
    grid.data = GridSettings.data;
    grid.idOfDrawPlace = document.getElementById(GridSettings.idOfDrawPlace);
    grid.FLP = new Array();             //FLP = first lvl propertys
    if(GridSettings.indToString){
        tmp = 0;
        for(var p in GridSettings.data[0]){
            grid.FLP[tmp] = new Object();
            grid.FLP[tmp].ind = p;
            grid.FLP[tmp].sortUp = true;
            for(var i=0; i < GridSettings.indToString.length; i++){
                for(var q in GridSettings.indToString[i]){
                    if(p==q){
                        grid.FLP[tmp].name = GridSettings.indToString[i].name;
                        grid.FLP[tmp].dt = GridSettings.indToString[i].dt;
                        break;
                    }
                    else{
                        grid.FLP[tmp].name = grid.FLP[tmp].ind;
                        grid.FLP[tmp].dt = "str";
                    }
                }
            }
            tmp++;
        }
    }
    else{
        tmp = 0;
        for(var p in GridSettings.data[0]){
            grid.FLP[tmp] = new Object();
            grid.FLP[tmp].ind = p;
            grid.FLP[tmp].sortUp = true;
            grid.FLP[tmp].name = p;
            grid.FLP[tmp].dt = "str";
            tmp++;
        }
    }
    grid.draw = function(){
        var htmlStr = '<table id="tab'+grid.id+'">';
        for(var i = 0; i < this.FLP.length; i++){
            htmlStr += '<th onclick="this.sortBy('+i+')\;">'+
                this.FLP[i].name+'</th>';
        }
        for(var i =0; i < this.data.length; i++){
            htmlStr += '<tr>';
            for(var p = 0; p < this.FLP.length; p++){
                htmlStr += '<td>'+this.data[i][this.FLP[p].ind]+'</td>';
            }
            htmlStr += '</tr>';
        }
        htmlStr += '</table>';
        this.idOfDrawPlace.innerHTML = htmlStr;
    }
    grid.clean = function(){
        this.idOfDrawPlace.innerHTML = "";
    }
    grid.sortBy = function (ind){
        this.nowSortBy = this.FLP[ind].ind;
        this.nowSortType = this.FLP[ind].dt;
        if(this.FLP[ind].sortUp){
            this.data.sort(this.sortRuleUp);
        }
        else{
            this.data.sort(this.sortRuleDown);
        }
    }
    grid.sortRuleUp = function(a,b){
        switch (this.nowSortType){
            case "str":
                if(a[this.nowSortBy] < b[this.nowSortBy]){
                    return -1;
                } else if (a[this.nowSortBy] > b[this.nowSortBy]){
                    return 1;
                } else return 0;
                break;
            case "num":
                if(a[this.nowSortBy]-0 < b[this.nowSortBy]-0){
                    return -1;
                } else if (a[this.nowSortBy]-0 > b[this.nowSortBy]-0){
                    return 1;
                } else return 0;
                break;
            default: return 0; break;
        }
    }
    grid.sortRuleDown = function(a,b){
        switch (this.nowSortType){
            case "str":
                if(a[this.nowSortBy] > b[this.nowSortBy]){
                    return -1;
                } else if (a[this.nowSortBy] < b[this.nowSortBy]){
                    return 1;
                } else return 0;
                break;
            case "num":
                if(a[this.nowSortBy]-0 > b[this.nowSortBy]-0){
                    return -1;
                } else if (a[this.nowSortBy]-0 < b[this.nowSortBy]-0){
                    return 1;
                } else return 0;
                break;
            default: return 0; break;
        }
    }
    return grid;
}


проблема обнаружилась в создании события onclick в тэгах th для сортировки таблицы (и в т.ч. массива) по заданному полю.
т.к. переменная которая получит результат грида заранее неизвестна,
поэтому и слудеющая часть кода ошибочна (в функции .draw):
htmlStr += '<th onclick="this.sortBy('+i+')\;">'+.......

как можно повесить на onclick вызов функции sortBy, если при этом она принадлежит неизвестному объекту?

P.S. функция грид принимает объект со следующими настройками:

var Obj = new Object();       // создаем объект
Obj.data                            // сюда кладем массив с объектами
Obj.idOfDrawPlace               // id тэга куда врисовать таблицу
Obj.colInfo = new Array();    // массив с данным о колонках
Obj.colInfo[0].ind;               // свойство объекта
Obj.colInfo[0].name;          // расшифровка свойства полным словом
Obj.colInfo[0].dt;             // data type (тип данных) либо "str либо "num"
................................. // и так далее для каждой колонки 
                                 //будущей таблицы
Obj.id;                         //уникальный id грида

Stakantin 27.02.2013 14:22

еще одно уточнение, желательно решить проблему без создания каких либо функций и переменных вне объекта grid

ksa 27.02.2013 14:28

Stakantin, начни с простого тестового примера и на нём покажи что тебе хочется получить.
Иначе мало кого заинтересуешь...

Stakantin 27.02.2013 14:45

вобщем нашел что меня интересует но видать подход не правильный
http://javascript.ru/forum/extjs/117...go-obekta.html

если все сильно упростить то надо сделать следующее:

var gridGenerator = function(idOfPlaceForDraw){ //idOfPlaceForDraw это id тэга куда добавятся данные
    var grid = new Object();
    grid.data = new Array(1,2,3,9,8,7);
    grid.placeForDraw = document.getElementById(idOfPlaceForDraw);
    grid.sorting = function(){
        this.data.sort();
        this.draw();
    }
    grid.draw = function(){
        this.placeForDraw.innerHTML = ""; //очищаем содержимое тэгов элемента от всего вложенного внутрь
        this.placeForDraw.innerHTML += '<input type="button" value="Sort and refresh" onclick="">'; //Вот это меня и интересует
        //как добавить сюда - в событие onclick вызов функции у именно этого объекта???
        //т.е. должно быть наподобии onclick="this.sorting();"
        for(var i = 0; i < this.data.length; i++){
            this.placeForDraw.innerHTML += this.data[i];
        }
    }
}


далее:

var someNewTable = gridGenerator;
// т.е. неизвестно заранее название переменной в которую будет получен объект grid
//и не возможно заранее вписать: onclick="someNewTable.sorting();"

ksa 27.02.2013 14:48

Цитата:

Сообщение от Stakantin
если все сильно упростить то надо сделать следующее

Нужно делать не огрызки... А нечто законченое. Дабы другие могли это запустить и тебе показать как сделать.

ksa 27.02.2013 14:51

Цитата:

Сообщение от Stakantin
как добавить сюда - в событие onclick вызов функции у именно этого объекта?

Как вариант в помощь
http://learn.javascript.ru/bind

ksa 27.02.2013 14:57

Если я тебя правильно понял...
У тебя есть:
- функция
- объект
Нужно в нутри функции обратиться к методу объекта...

function f() {
  this.m();
}
var obj={
	name: "Вася",
	m: function(){
		alert(this.name);
	}
}
test = f.bind(obj);
test();

bind() не работает в старых версиях ИЕ...

Stakantin 27.02.2013 15:06

проблему решил :D

Stakantin 27.02.2013 15:10

Позже скину решение...
решил с помошью объекта window
подробности чуть позже.

кстати видать я совсем неверно описал проблему =\


Часовой пояс GMT +3, время: 01:38.