តុអគាររបស់ HTML “ក្រុមហ៊ុន Google API ដែលមើលឃើញ”

តើធ្វើដូចម្តេចអំពីការបង្ហាញទិន្នន័យរបស់អ្នកតារាងមួយដែលមានទិដ្ឋភាពស្រស់ស្អាតនិងនៅតែអាចតម្រៀបនិងទំព័រ, ទាំងអស់ដែលបានកសាងឡើងជាថាមវន្តដោយគ្មានការសរសេរណាមួយឡើយ “តារាង HTML”?

បទបង្ហាញ

មួយ ក្រុមហ៊ុន Google API ដែលមើលឃើញ វាបង្ហាញសំណុំនៃបច្ចេកទេសសម្រាប់ការមើលឃើញនៃទិន្នន័យរបស់អ្នកយ៉ាងស្រួល. នៅក្នុងការប្រកាសនេះយើងនឹងឃើញ តារាងតារាង.

ប្រតិបត្ដិការ

ឧទាហរណ៍
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?php
<html ឡង់="pt-BR">
  <ប្រធាន>    
    <សំណុំតួអក្សរមេតា="ISO-8859-1" />
    <ប្រភេទស្គ្រីប='អត្ថបទ / JavaScript " src="HTTPS://www.google.com/jsapi "></ស្គ្រីប>
    <ប្រភេទស្គ្រីប='អត្ថបទ / JavaScript ">
      ហ្គូហ្គល.ផ្ទុក("មើលឃើញ", '1', {កញ្ចប់:["តារាង"]});
      ហ្គូហ្គល.setOnLoadCallback(drawTable);
      មុខងារ drawTable() {
        គឺ ទិន្នន័យ = ថ្មី ហ្គូហ្គល.រូបភាពមើលឃើញ.DataTable();
        ទិន្នន័យ.addColumn("ខ្សែអក្សរ", 'ឈ្មោះ');
        ទិន្នន័យ.addColumn('ចំនួន', "ប្រាក់ខែ");
        ទិន្នន័យ.addColumn("ប៊ូលីន", "ពេញម៉ោង");
        ទិន្នន័យ.addRows([
          ["លោកយ៉ូហាន",  {ជួប: 2000,: 'R 2.000,00 $ "}, ជាការពិត],
          ["ម៉ារីយ៉ា", {ជួប: 5000,: 'R 5.000,00 $ "}, មិនពិត],
          ["ឈ្មោះ Alice", {ជួប: 1000,: 'R 1.000,00 $ "}, ជាការពិត],
          ["លោក Bob",   {ជួប: 1500,: 'R 1.500,00 $ "}, ជាការពិត]
        ]);
        គឺ តារាង = ថ្មី ហ្គូហ្គល.រូបភាពមើលឃើញ.តារាង(ឯកសារ.getElementById("table_div"));
        តារាង.គូរ(ទិន្នន័យ, {showRowNumber: ជាការពិត});
      }
    </ស្គ្រីប>
  </ប្រធាន>
  <រាងកាយ>
    <លេខសម្គាល់ div="table_div"></div>
  </រាងកាយ>
</html>
?>

(1) ក្នុងកូដខាងលើ, ចំណាំថាយើងបានចាប់ផ្តើមធ្វើឱ្យមានការហៅទៅ API របស់ Google JavaScript មួយ (JSAPI).

(2) បន្ទាប់មក, អនុវត្ត រូបភាពមើលឃើញ, នៅក្នុងកំណែ 1.0, និងបណ្ណាល័យរបស់អ្នក "តារាង’.

(3) យើងប្រើមុខងារនេះ JSAPI setOnLoadCallback ផ្ដល់ដោះស្រាយ drawTable (ឬឈ្មោះផ្សេងទៀតដែលអ្នកចង់បាន), តើនរណាជាការពិតគួរតែបង្កើតនិងរៀបចំតុ.

(4) មួយ DataTable វាត្រូវបានបម្លែងទៅក្នុងតារាង HTML មួយដែលនៅក្នុងជួរឈរនីមួយត្រូវតែមានប្រភេទដូចគ្នានៃទិន្នន័យដែលបានគាំទ្រ (ខ្សែអក្សរ, ប៊ូលីន, ចំនួន, ល).

(5) ប្រើ o េ addColumn() ដើម្បីបង្កើតជួរឈរមួយ, ឆ្លងកាត់ជាមួយនឹងប្រភេទប៉ារ៉ាម៉ែត្រឈ្មោះនិងទិន្នន័យ.

(6) ការប្រើ addRows() ដើម្បីបង្កើតជួរដេកតារាង, នៅក្នុងពាក្យផ្សេងទៀត, បញ្ចូលទិន្នន័យរបស់អ្នកដោយខ្លួនឯង. បន្ទាត់ត្រូវបានកំណត់ព្រំដែនដោយតង្កៀប [] និងពនៃក្រឡាគ្នាត្រូវបានបំបែកដោយសញ្ញាក្បៀស. បានដឹងថាមានការកំណត់មួយ “ជួប” អ៊ី “ច”, ខ្ញុំគិតថាមានន័យថាតម្លៃនិងវាល, រៀង, នៅក្នុងពាក្យផ្សេងទៀត, តម្លៃពិតប្រាកដនៃក្រឡានិងស្លាកត្រូវបានបង្ហាញនៅក្នុងវាលនេះ. នេះគឺជាការចាំបាច់, ដោយសារតែ, ដូចដែលបាននិយាយថានេះគឺជាជួរឈរ “ទាំងមូល”, បន្ទាប់មកលំដាប់ត្រឹមត្រូវអាចត្រូវបានអន់ថយប្រសិនបើវាត្រូវបានថតជាខ្សែអក្សរ.

(7) ទីបំផុត, ដែលបានរាយការណ៍នៅលើការរចនាតារាង DIV នឹងត្រូវបានបង្ហាញ (table_div) និងការត្រៀមខ្លួនជាស្រេច!

នៅក្នុងការអនុវត្ត

លេខកូដខាងលើនេះបង្កើតតារាង HTML ខាងក្រោម:

វាមិនមែនជាគួរឱ្យចាប់អារម្មណ៍សូម្បីតែ? តារាង HTML ទាំងអស់ត្រូវបានបង្កើតឡើងដោយមិនថាយើងត្រូវការឱ្យសរសេរតារាងមួយ, TR លោកអ៊ូ TD. ច្បាស់ណាស់, នេះគឺគ្រាន់តែបាតុកម្ម. អ្នកអាចបង្កើនចំណេះរបស់អ្នកនិងរកឃើញការកំណត់រចនាសម្ព័ន្ធផ្សេងទៀតដើម្បីជម្រើសធ្វើការជាមួយតុដោយ តារាងតារាង.

វិចិត្រសាល

លក្ខណៈពិសេសគួរឱ្យចាប់អារម្មណ៍នៅតែមានមនុស្សជាច្រើនផ្សេងទៀតគឺថា វិចិត្រសាល Google តារាង ការផ្តល់ជូនពិសេស. វាមានភាពខុសគ្នានៃតារាងដែលត្រូវបានធ្វើឱ្យប្រសើរដើម្បីបំពេញតម្រូវការរូបភាពមើលឃើញទិន្នន័យ. ក្រាហ្វិកនេះត្រូវបានផ្អែកលើ HTML5 / SVG សុទ្ធ (ទទួលយក VML សម្រាប់កំណែចាស់របស់ IE), កម្មវិធីជំនួយដូច្នេះមិនត្រូវបានតម្រូវ. ក្រាហ្វិកទាំងនេះអាចត្រូវបានបន្ថែមទៅកាន់ទំព័ររបស់អ្នកនៅក្នុងគ្រាន់តែជាជំហានសាមញ្ញមួយចំនួន.

ប្រភព

ការចូលដំណើរការសរុប: 5923

ទុកឱ្យឆ្លើយតបមួយ

អាសយដ្ឋានអ៊ីមែលរបស់អ្នកនឹងមិនត្រូវបានបោះពុម្ភ. វាលដែលត្រូវការត្រូវបានសម្គាល់ដោយ *