Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > создание таблицы с помощью jQuery

Автор: maxkap 17.7.2009, 11:54

Короче, есть текст, который выбирается из базы и отдельным пхп скриптом формируется в json.

Нужно из этого Джейсона сделать табличку.

Код




    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">    
    $(document).ready(function(){ 
        $.post("json.php","tbl=BANK",function(data)
        {
            //здесь нужно сделать табличку 
            alert(data);                    
        },JSON);               
    });
</script>
</head>
<body>
</body>
</html>

строка json
({
'items':[
{ ID: '2',NAME: 'ПриватБанк',MFO: '304795',ADDRESS: 'Антрацит ул. Петровского' }
{ ID: '3',NAME: 'Пра',MFO: 'Пра ',ADDRESS: 'Пра' } { ID: '4',NAME: 'Правэкс',MFO: '304432',ADDRESS: 'Антрацит' }
{ ID: '5',NAME: 'УкрГаз',MFO: '304213',ADDRESS: 'ывауцкцукфвуцв' } { ID: '6',NAME: 'СибБанк',MFO: '304213',ADDRESS: 'Антрацит' }
{ ID: '12',NAME: 'Name',MFO: 'Ok ',ADDRESS: 'Cancel' }
]
})

нужно сделать табл.
id        name                          MFO                     ADDRESS
2         ПриватБанк               304795                Антрацит ул. Петровского
.......       .........                           .............             ........

плюс, данные будут выбираться из разных таблиц, с разным кол-вом столбцов и строк,
хотелось бы скрипт сделать универсальным.

в jquery соображаю не сильно, поэтому если че не горячитесь......... smile

Автор: unicross 17.7.2009, 13:43

Если только с помощью jQuery, то можно, например, так:

Код


      $.post("json.php", "tbl=BANK", function(data) {
         var tbl = "<table border=1>";
         tbl += "<tr><th>id</th><th>name</th><th>mfo</th><th>address</th></tr>";
         for (var i=0, count=data.items.length; i<count; i++) {
            tbl += "<tr>";
            tbl += "<td>" + data.items[i].id + "</td>";
            tbl += "<td>" + data.items[i].name + "</td>";
            tbl += "<td>" + data.items[i].mfo + "</td>";
            tbl += "<td>" + data.items[i].address + "</td>";
            tbl += "</tr>";
         }
         tbl += "</table>";
         $("#result").html(tbl);
      }, "json");

Код


<?php
header('Content-Type: text/javascript; charset=utf-8');
?>
({
"items":[
{ id:"2", name:"ПриватБанк", mfo:"304795", address:"Антрацит ул. Петровского" },
{ id:"3", name:"Пра", mfo:"Пра ", address:"Пра" },
{ id:"4", name:"Правэкс", mfo:"304432", address:"Антрацит" },
{ id:"5", name:"УкрГаз", mfo:"304213", address:"ывауцкцукфвуцв" },
{ id:"6", name:"СибБанк", mfo:"304213", address:"Антрацит" },
{ id:"12", name:"Name", mfo:"Ok ", address:"Cancel" }
]
})

Хотя проще на сервере сформировать таблицу и вывести, чем передавать через json. Если конечно данные не с другого домена...

Автор: maxkap 17.7.2009, 13:58

да так я без проблем могу решить поставленую задачу.
хотелось бы ячейки таблицы не статически указывать, а динемически.
просто в этой таблице, что в примере 4 столбца, а вдругих и по 5, и по 3 есть.
хотелось бы какойто универсальный скрипт...

Добавлено через 4 минуты и 25 секунд
Вот кстати php-код формирования json

Код


<?php
    function composeJSON($array) 
    {        
        foreach ($array as $item) 
        {
            $json .= " { ";
            foreach ($array as $key => $val) 
            {                
                if (is_array($val)) 
                {
                    $json .= $key.": ".composeJSON($val);
                }
                else 
                {
                    $json .= "{$key}: '{$val}',";
                }
            }
            $json = substr($json, 0, -2);
            $json .= "' } ,";
        }
        $json = substr($json, 0, -2);    
        
        return $json;
    }  
    function in_json ($str)
    {    
        include('./app/classes/decode.inc.php');
        include('./app/classes/connect.inc.php'); 
        $result = "";
        $sth = DBQuery(DBConnect(),'SELECT * FROM '.$str);
        $check = true;
        while ($row = ibase_fetch_object ($sth)) 
        {   
            header("Content-type: text/javascript; charset=utf-8");
            if ($check)
            {
                $result .= "({'items':[";
                $check = false;
            }
            $result .=  win2utf(composeJSON($row));                       
        }
        $result .=  "]})";
        echo $result;
    }   
    
    $tbl='BANK';
    if(isset($_POST['tbl'])) $tbl = $_POST['tbl']; 
    in_json ($tbl);
    
?>

мож так кому-то по понятней будет.........

Автор: Sanchezzz 17.7.2009, 14:40

Думаю переписать на динамику будет не сложно
mootools

Код


function addFeald(){
    var tbl = $('tablefeald'); //getElemetByID
    var countfeald = tbl.rows.length;
    var oRow = tbl.insertRow(countfeald);
    var oCell = oRow.insertCell(0);
    oCell.set('html','<input type="text" style="width: 140px" class="xInputText">'); //типа innerHTML
    var oCell = oRow.insertCell(1); 
    oCell.set('html','<input type="text" style="width: 140px" name="c12" class="xInputText">'); 
    var oCell=  oRow.insertCell(2);
    oCell.set('html','<input type="text" class="xInputText" style="width: 50px" maxlength="4" value="0">');

Автор: maxkap 17.7.2009, 15:36

Глубоко уважаемый Sanchezzz, можно ли небольшое разъяснение Вашего примерчика.......
а то smile

))))))))))

и как мне его привязать к моему примеру.....?

Автор: IDVsbruck 17.7.2009, 16:57

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

Автор: maxkap 20.7.2009, 09:09

IDVsbruck, согласен, можно и на стороне сервера делать таблицу.
это и намного проще, и понятнее(по крайней мере для меня).

просто мне посоветовали это сделать с помощью jQuery, типа это легче и проще, в 2 строчки и без перегрузки страницы.
я с jQ. знаком очень плохо, поэтому и решил разобраться., тем более проект не срочный....

Автор: ksnk 20.7.2009, 10:53

maxkap, Все данные , прилетевшие в одно время имеют одинаковый набор полей или соседние строчки из разных таблиц?
Решение, в обшем то-же, что и unicross уже написал, вот только нужно предварительно пробежаться по объекту-строке (циклом for ... in ) и вычислить набор полей. Потом выводить столбцы тоже в цикле...

Я бы формировал текст таблицы на сервере и передавал его уже готовым. Так, imho, более обозримое решение получится, шаблоны для вывода таблицы не нужно будет портировать в скрипт...

Автор: maxkap 20.7.2009, 11:45

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