تجسم: جدول

1. بررسی اجمالی
2. مثال
3. بارگذاری
4. فرمت داده
   1. ویژگی های سفارشی
5. گزینه های پیکربندی
6. مواد و روش ها
7. مناسبت ها
8. فرمت کننده ها
9. سیاست داده

بررسی اجمالی

جدولی که قابل مرتب سازی و صفحه بندی است. سلول های جدول را می توان با استفاده از رشته های قالب یا با درج مستقیم HTML به عنوان مقادیر سلول قالب بندی کرد. مقادیر عددی تراز راست هستند. مقادیر بولی به صورت علامت چک نمایش داده می شوند. کاربران می توانند ردیف های تکی را با صفحه کلید یا ماوس انتخاب کنند. کاربران می توانند با کلیک بر روی سرصفحه ستون ها ردیف ها را مرتب کنند. با پیمایش کاربر، ردیف سرصفحه ثابت می ماند. جدول تعدادی رویداد مربوط به تعامل کاربر را نشان می دهد.

مثال

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="table_div"></div> google.charts.load('current', {'packages':['table']}); google.charts.setOnLoadCallback(drawTable); function drawTable() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); data.addColumn('number', 'Salary'); data.addColumn('boolean', 'Full Time Employee'); data.addRows([ ['Mike', {v: 10000, f: '$10,000'}, true], ['Jim', {v:8000, f: '$8,000'}, false], ['Alice', {v: 12500, f: '$12,500'}, true], ['Bob', {v: 7000, f: '$7,000'}, true] ]); var table = new google.visualization.Table(document.getElementById('table_div')); table.draw(data, {showRowNumber: true, width: '100%', height: '100%'}); } <span class="notranslate"><input type='submit' value="خودتان آن را در JSFiddle کد کنید" class='button'/><input type='hidden' name='title' value='Table Chart Example'/> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="table_div"></div> google.charts.load('current', {'packages':['table']}); google.charts.setOnLoadCallback(drawTable); function drawTable() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); data.addColumn('number', 'Salary'); data.addColumn('boolean', 'Full Time Employee'); data.addRows([ ['Mike', {v: 10000, f: '$10,000'}, true], ['Jim', {v:8000, f: '$8,000'}, false], ['Alice', {v: 12500, f: '$12,500'}, true], ['Bob', {v: 7000, f: '$7,000'}, true] ]); var table = new google.visualization.Table(document.getElementById('table_div')); table.draw(data, {showRowNumber: true, width: '100%', height: '100%'}); }<input type='hidden' name='css' value=''/><input type='hidden' name='description' value='An example of a Google Table Chart.'/><input type='hidden' name='dtd' value='html 5'/><input type='hidden' name='wrap' value='b'/></span> <span class="notranslate"><input type='submit' value="خودتان آن را در JSFiddle کد کنید" class='button'/><input type='hidden' name='title' value='Table Chart Example'/> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="table_div"></div> google.charts.load('current', {'packages':['table']}); google.charts.setOnLoadCallback(drawTable); function drawTable() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); data.addColumn('number', 'Salary'); data.addColumn('boolean', 'Full Time Employee'); data.addRows([ ['Mike', {v: 10000, f: '$10,000'}, true], ['Jim', {v:8000, f: '$8,000'}, false], ['Alice', {v: 12500, f: '$12,500'}, true], ['Bob', {v: 7000, f: '$7,000'}, true] ]); var table = new google.visualization.Table(document.getElementById('table_div')); table.draw(data, {showRowNumber: true, width: '100%', height: '100%'}); }<input type='hidden' name='css' value=''/><input type='hidden' name='description' value='An example of a Google Table Chart.'/><input type='hidden' name='dtd' value='html 5'/><input type='hidden' name='wrap' value='b'/></span> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="table_div"></div> google.charts.load('current', {'packages':['table']}); google.charts.setOnLoadCallback(drawTable); function drawTable() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); data.addColumn('number', 'Salary'); data.addColumn('boolean', 'Full Time Employee'); data.addRows([ ['Mike', {v: 10000, f: '$10,000'}, true], ['Jim', {v:8000, f: '$8,000'}, false], ['Alice', {v: 12500, f: '$12,500'}, true], ['Bob', {v: 7000, f: '$7,000'}, true] ]); var table = new google.visualization.Table(document.getElementById('table_div')); table.draw(data, {showRowNumber: true, width: '100%', height: '100%'}); }

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['table']});
      google.charts.setOnLoadCallback(drawTable);

      function drawTable() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('number', 'Salary');
        data.addColumn('boolean', 'Full Time Employee');
        data.addRows([
          ['Mike',  {v: 10000, f: '$10,000'}, true],
          ['Jim',   {v:8000,   f: '$8,000'},  false],
          ['Alice', {v: 12500, f: '$12,500'}, true],
          ['Bob',   {v: 7000,  f: '$7,000'},  true]
        ]);

        var table = new google.visualization.Table(document.getElementById('table_div'));

        table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
      }
    </script>
  </head>
  <body>
    <div id="table_div"></div>
  </body>
</html>

بارگذاری

نام بسته google.charts.load "table" است.

  google.charts.load('current', {packages: ['table']});

نام کلاس تجسم google.visualization.Table است.

  var visualization = new google.visualization.Table(container);

فرمت داده

DataTable به یک جدول HTML مربوطه تبدیل می شود و هر سطر/ستون در DataTable به یک سطر/ستون در جدول HTML تبدیل می شود. هر ستون باید از یک نوع داده باشد و همه انواع داده های تجسم استاندارد پشتیبانی می شوند (رشته، بولی، عدد و غیره).

ویژگی های سفارشی

با استفاده از متد setProperty() DataTable می توانید ویژگی های سفارشی زیر را به عناصر جدول داده اختصاص دهید.

نام ملک	اعمال می شود	شرح
نام کلاس	سلول	یک نام کلاس رشته ای برای اختصاص دادن به یک سلول جداگانه. از این برای اختصاص استایل CSS به سلول های جداگانه استفاده کنید.
سبک	سلول	یک رشته سبک برای تخصیص درون خطی به سلول. با این کار سبک های کلاس CSS اعمال شده در آن سلول لغو می شود. برای این کار باید ویژگی allowHtml=true را تنظیم کنید. مثال: 'border: 1px solid green;' .

مثال

dataTable.setCell(22, 2, 15, 'Fifteen', {style: 'font-style:bold; font-size:22px;'});

گزینه های پیکربندی

نام
allowHtml	اگر روی true تنظیم شود، مقادیر قالب‌بندی شده سلول‌هایی که شامل برچسب‌های HTML هستند به‌عنوان HTML ارائه می‌شوند. اگر روی false تنظیم شود، اکثر فرمت‌کننده‌های سفارشی به درستی کار نمی‌کنند. نوع: بولی پیش فرض: نادرست
متناوب RowStyle	تعیین می کند که آیا سبک رنگ متناوب به ردیف های زوج و فرد اختصاص داده می شود. نوع: بولی پیش فرض: درست است
cssClassNames	یک شی که در آن نام هر ویژگی یک عنصر جدول را توصیف می کند و مقدار ویژگی یک رشته است که کلاسی را برای اختصاص دادن به آن عنصر جدول تعریف می کند. از این ویژگی برای اختصاص CSS سفارشی به عناصر خاصی از جدول خود استفاده کنید. برای استفاده از این ویژگی، یک شی اختصاص دهید، جایی که نام ویژگی عنصر جدول را مشخص می کند، و مقدار ویژگی یک رشته است، که نام کلاسی را برای اختصاص دادن به آن عنصر مشخص می کند. سپس باید یک سبک CSS برای آن کلاس در صفحه خود تعریف کنید. نام اموال زیر پشتیبانی می شود: headerRow - یک نام کلاس به ردیف سرصفحه جدول ( عنصر <tr> ) اختصاص می دهد. tableRow - نام کلاس را به ردیف های غیر سربرگ (عناصر <tr> ) اختصاص می دهد. oddTableRow - نام کلاس را به ردیف های جدول فرد اختصاص می دهد ( عناصر <tr> ). نکته: گزینه alternatingRowStyle باید روی true تنظیم شود. selectedTableRow - نام کلاس را به ردیف جدول انتخاب شده اختصاص می دهد ( عنصر <tr> ). hoverTableRow - نام کلاس را به ردیف جدول معلق ( عنصر <tr> ) اختصاص می دهد. headerCell - یک نام کلاس به تمام سلول های ردیف سرصفحه ( عنصر <td> ) اختصاص می دهد. tableCell - نام کلاس را به تمام سلول های جدول غیر سربرگ اختصاص می دهد ( عنصر <td> ). rowNumberCell - یک نام کلاس به سلول های ستون شماره ردیف ( عنصر <td> ) اختصاص می دهد. توجه: گزینه showRowNumber باید روی true تنظیم شود. مثال: var cssClassNames = {headerRow: 'bigAndBoldClass', hoverTableRow: 'highlightClass'}; توجه: در CSS، برخی از عناصر، برخی دیگر را لغو می کنند. به عنوان مثال، اگر یک رنگ پس زمینه برای یک عنصر <tr> و یک عنصر <td> مشخص کنید، دومی بر عنصر اول اولویت دارد. مطمئن شوید که تمام سبک های CSS مربوطه را در cssClassNames برای جلوگیری از تداخل مشخص کنید. نوع: شی پیش فرض: null
firstRowNumber	شماره ردیف برای ردیف اول در dataTable. فقط در صورتی استفاده می شود که showRowNumber درست باشد. نوع: شماره پیش فرض: 1
ستون های منجمد	تعداد ستون‌هایی که از سمت چپ ثابت می‌شوند. این ستون ها هنگام اسکرول کردن ستون های باقی مانده به صورت افقی در جای خود باقی می مانند. اگر showRowNumber false ، تنظیم frozenColumns بر روی 0 به نظر می رسد که اگر روی null ، اما اگر showRowNumber روی true تنظیم شود، ستون شماره ردیف ثابت می شود. نوع: شماره پیش فرض: null
ارتفاع	ارتفاع عنصر ظرف تجسم را تنظیم می کند. می توانید از واحدهای استاندارد HTML استفاده کنید (به عنوان مثال، '100px'، '80em'، '60'). اگر هیچ واحدی مشخص نشده باشد، عدد پیکسل در نظر گرفته می شود. اگر مشخص نشده باشد، مرورگر به طور خودکار ارتفاع را متناسب با جدول تنظیم می کند و در این فرآیند تا حد امکان کوچک می شود. اگر کوچکتر از ارتفاع مورد نیاز تنظیم شود، جدول یک نوار اسکرول عمودی اضافه می کند (ردیف سرصفحه نیز ثابت است). اگر روی "100%" تنظیم شود، جدول تا حد امکان به عنصر ظرف گسترش می یابد. نوع: رشته پیش فرض: خودکار
صفحه	آیا و چگونه می توان صفحه بندی از طریق داده ها را فعال کرد. یکی از مقادیر رشته زیر را انتخاب کنید: 'فعال کردن' - جدول شامل دکمه های صفحه به جلو و صفحه برگشت است. با کلیک بر روی این دکمه ها عملیات صفحه بندی انجام می شود و صفحه نمایش داده شده تغییر می کند. ممکن است بخواهید گزینه pageSize را نیز تنظیم کنید. 'رویداد' - جدول شامل دکمه های صفحه به جلو و صفحه برگشت است، اما کلیک کردن روی آنها یک رویداد 'صفحه' را راه اندازی می کند و صفحه نمایش داده شده را تغییر نمی دهد. این گزینه باید زمانی استفاده شود که کد منطق چرخش صفحه خود را پیاده سازی کند. مثال TableQueryWrapper را برای مثالی از نحوه مدیریت دستی رویدادهای صفحه بندی ببینید. 'غیرفعال کردن' - [ پیش فرض ] صفحه بندی پشتیبانی نمی شود. نوع: رشته پیش فرض: "غیرفعال کردن"
اندازه صفحه	تعداد ردیف های هر صفحه، زمانی که صفحه بندی با گزینه page فعال می شود. نوع: شماره پیش فرض: 10
دکمه های صفحه بندی	یک گزینه مشخص برای دکمه های صفحه بندی تنظیم می کند. گزینه ها به شرح زیر است: هر دو - دکمه های قبلی و بعدی را فعال کنید 'prev' - فقط دکمه prev فعال است "بعدی" - فقط دکمه بعدی فعال است "خودکار" - دکمه ها مطابق صفحه فعلی فعال می شوند. در صفحه اول فقط بعدی نشان داده شده است. در صفحه آخر فقط قبلی نشان داده شده است. در غیر این صورت هر دو فعال هستند. شماره - تعداد دکمه های صفحه بندی برای نمایش. این عدد صریح، عدد محاسبه‌شده را از pageSize لغو می‌کند. نوع: رشته یا عدد پیش فرض: "خودکار"
rtlTable	با معکوس کردن ترتیب ستون های جدول، پشتیبانی اولیه را برای زبان های راست به چپ (مانند عربی یا عبری) اضافه می کند، به طوری که ستون صفر سمت راست ترین ستون و آخرین ستون سمت چپ ترین ستون باشد. این بر شاخص ستون در داده‌های زیربنایی تأثیر نمی‌گذارد، فقط ترتیب نمایش را تحت تأثیر قرار می‌دهد. نمایش زبان کامل دو جهته (BiDi) توسط تجسم جدول حتی با این گزینه پشتیبانی نمی شود. اگر صفحه‌بندی را فعال کنید (با استفاده از گزینه صفحه)، یا اگر جدول دارای نوارهای پیمایش باشد، این گزینه نادیده گرفته می‌شود، زیرا گزینه‌های ارتفاع و عرض کوچک‌تر از اندازه جدول مورد نیاز را مشخص کرده‌اید. نوع: بولی پیش فرض: نادرست
scrollLeftStartPosition	اگر جدول دارای نوارهای اسکرول افقی باشد، موقعیت اسکرول افقی را بر حسب پیکسل تنظیم می کند، زیرا ویژگی عرض را تنظیم کرده اید. جدول با پیمایش تعداد زیادی پیکسل از سمت چپ ترین ستون باز می شود. نوع: شماره پیش فرض: 0
showRowNumber	اگر روی true تنظیم شود، شماره ردیف را به عنوان ستون اول جدول نشان می دهد. نوع: بولی پیش فرض: نادرست
مرتب سازی	اگر و چگونه می توان ستون ها را هنگامی که کاربر روی عنوان ستون کلیک می کند مرتب کرد. اگر مرتب سازی فعال است، ویژگی های sortAscending و sortColumn را نیز در نظر بگیرید. یکی از مقادیر رشته زیر را انتخاب کنید: 'فعال کردن' - [ پیش‌فرض ] کاربران می‌توانند روی سرصفحه‌های ستون کلیک کنند تا بر اساس ستون کلیک شده مرتب شوند. هنگامی که کاربران روی سرصفحه ستون کلیک می کنند، ردیف ها به طور خودکار مرتب می شوند و یک رویداد "مرتب سازی" راه اندازی می شود. "رویداد" - هنگامی که کاربران روی سرصفحه ستون کلیک می کنند، یک رویداد "مرتب سازی" راه اندازی می شود، اما ردیف ها به طور خودکار مرتب نمی شوند. این گزینه باید زمانی استفاده شود که صفحه مرتب سازی خود را اجرا می کند. مثال TableQueryWrapper را برای مثالی از نحوه مدیریت دسته‌بندی رویدادها به صورت دستی ببینید. 'غیرفعال کردن' - کلیک کردن روی سرصفحه ستون هیچ تاثیری ندارد. نوع: رشته پیش فرض: "فعال کردن"
مرتب سازی صعودی	ترتیب مرتب‌سازی ستون مرتب‌سازی اولیه. درست برای صعود، نادرست برای نزول. اگر sortColumn مشخص نشده باشد نادیده گرفته می شود. نوع: بولی پیش فرض: درست است
مرتب سازی ستون	شاخصی از یک ستون در جدول داده ها، که در ابتدا جدول بر اساس آن مرتب می شود. ستون با یک فلش کوچک که ترتیب مرتب سازی را نشان می دهد مشخص می شود. نوع: شماره پیش فرض: -1
صفحه شروع	اولین صفحه جدول برای نمایش فقط در صورتی استفاده می شود که page در حالت فعال/رویداد باشد. نوع: شماره پیش فرض: 0
عرض	عرض عنصر ظرف تجسم را تنظیم می کند. می توانید از واحدهای استاندارد HTML استفاده کنید (به عنوان مثال، '100px'، '80em'، '60'). اگر هیچ واحدی مشخص نشده باشد، عدد پیکسل در نظر گرفته می شود. اگر مشخص نشده باشد، مرورگر به طور خودکار عرض را برای تناسب با جدول تنظیم می کند و در این فرآیند تا حد امکان کوچک می شود. اگر کوچکتر از عرض مورد نیاز تنظیم شود، جدول یک نوار اسکرول افقی اضافه می کند. اگر روی "100%" تنظیم شود، جدول تا حد امکان به عنصر ظرف گسترش می یابد. نوع: رشته پیش فرض: خودکار

مواد و روش ها

روش
draw(data, options)	جدول را می کشد. نوع بازگشت: ندارد
getSelection()	پیاده سازی استاندارد getSelection. عناصر انتخاب همه عناصر ردیف هستند. می تواند بیش از یک ردیف انتخاب شده را برگرداند. شاخص های ردیف در شی انتخاب به جدول داده های اصلی بدون توجه به هرگونه تعامل کاربر (مرتب سازی، صفحه بندی و غیره) اشاره می کنند. توجه داشته باشید که انتخاب(ها) تغییر می کند: با کلیک بر روی یک سلول برای اولین بار آن را انتخاب می کنید. با کلیک مجدد روی سلول، آن را از حالت انتخاب خارج می‌کند و در نتیجه یک رویداد انتخابی ایجاد می‌شود، اما هیچ مورد انتخابی در شی انتخابی بازیابی شده وجود ندارد. نوع بازگشت: آرایه ای از عناصر انتخابی
getSortInfo()	این روش را برای بازیابی اطلاعات مربوط به وضعیت مرتب سازی فعلی جدولی که مرتب شده است (معمولاً توسط کاربر که روی عنوان ستون کلیک کرده است تا ردیف ها را بر اساس یک ستون خاص مرتب کند) بازیابی کنید. اگر مرتب سازی را غیرفعال کرده اید، این روش کار نخواهد کرد. اگر داده ها را در کد مرتب نکرده باشید، یا کاربر با انتخاب کد، داده ها را مرتب نکرده باشد، مقادیر مرتب سازی پیش فرض برگردانده می شوند. نوع بازگشت: یک شی با ویژگی های زیر: column - (شماره) نمایه ستونی که جدول بر اساس آن مرتب شده است. ascending - (بولی) درست اگر مرتب سازی صعودی باشد، غلط اگر نزولی باشد. sortedIndexes - (آرایه عددی) آرایه اعداد، که در آن شاخص در آرایه، شماره ردیف مرتب شده (در جدول قابل مشاهده)، و مقدار، شاخص آن ردیف در جدول داده های زیرین (مرتب نشده) است.
setSelection(selection)	اجرای استاندارد setSelection() ، اما فقط می‌تواند کل ردیف‌ها یا چندین ردیف را انتخاب کند. شاخص های ردیف در شی انتخاب به جدول داده های اصلی بدون توجه به هرگونه تعامل کاربر (مرتب سازی، صفحه بندی و غیره) اشاره می کنند. نوع بازگشت: ندارد
clearChart()	نمودار را پاک می کند و تمام منابع اختصاص داده شده آن را آزاد می کند. نوع بازگشت: ندارد

مناسبت ها

نام
انتخاب کنید	رویداد انتخاب استاندارد، اما فقط کل ردیف‌ها را می‌توان انتخاب کرد. خواص: ندارد
صفحه	هنگامی که کاربران روی دکمه پیمایش صفحه کلیک می کنند فعال می شود. خواص: page : شماره. فهرست صفحه ای که باید به آن پیمایش کنید.
مرتب سازی	هنگامی که کاربران روی سرصفحه ستون کلیک می‌کنند فعال می‌شود و گزینه مرتب‌سازی «غیرفعال» نیست. Properties: یک شی با ویژگی های زیر: column - (شماره) نمایه ستونی که جدول بر اساس آن مرتب شده است. ascending - (بولی) درست اگر مرتب سازی صعودی باشد، غلط اگر نزولی باشد. sortedIndexes - (آرایه عددی) آرایه‌ای از اعداد، که در آن شاخص در آرایه، شماره ردیف مرتب‌شده (در جدول قابل مشاهده)، و مقدار شاخص آن ردیف در جدول داده‌های زیرین (مرتب‌نشده) است.
آماده	نمودار برای تماس های متد خارجی آماده است. اگر می‌خواهید با نمودار تعامل داشته باشید و پس از ترسیم روش‌ها را فراخوانی کنید، باید قبل از فراخوانی متد قرعه‌کشی، شنونده‌ای برای این رویداد تنظیم کنید و تنها پس از فعال شدن رویداد، آنها را فراخوانی کنید. خواص: ندارد

فرمت کننده ها

توجه: تجسم جدول دارای مجموعه‌ای از اشیاء قالب‌کننده است که توسط قالب‌کننده‌های عمومی جایگزین شده‌اند، که به همین شکل عمل می‌کنند، اما می‌توانند در هر تصویرسازی استفاده شوند.

جدول زیر قالب‌کننده جدول قدیمی و قالب‌کننده عمومی معادل آن را نشان می‌دهد. هنگام نوشتن کد جدید باید از قالب‌کننده عمومی استفاده کنید.

جدول ساز
TableArrowFormat	google.visualization.ArrowFormat
TableBarFormat	google.visualization.BarFormat
TableColorFormat	google.visualization.ColorFormat
TableDateFormat	google.visualization.DateFormat
TableNumberFormat	google.visualization.NumberFormat
TablePatternFormat	google.visualization.PatternFormat

مهم: قالب‌سازها اغلب از HTML برای قالب‌بندی متن خود استفاده می‌کنند. بنابراین، باید گزینه allowHtml را روی true تنظیم کنید.

سیاست داده

تمام کدها و داده ها در مرورگر پردازش و ارائه می شوند. هیچ داده ای به هیچ سروری ارسال نمی شود.