react keyview

react-keyview

---

การติดตั้ง

---

ผ่าน NPM

 npm i react-keyview

ผ่านเส้นด้าย

 yarn add react-keyview

ผ่าน CDN (UNPKG)

 https://unpkg.com/react-keyview@latest

ห้องสมุด UMD เปิดเผยเป็น ReactKeyView

 const KV = ReactKV ;

บันทึก. แพ็คเกจนี้ไม่ได้ให้ทรัพยากรสไตล์ชีทใด ๆ ส่วนประกอบสามารถปรับแต่งได้สูง นอกจากนี้ยังรองรับการแสดงผลฝั่งเซิร์ฟเวอร์

การสาธิต

• รายการ
• โต๊ะ
• กริด

การใช้งาน

คุณสามารถนำเข้าส่วนประกอบใด ๆ ที่คุณต้องการเป็นการส่งออกที่มีชื่อจาก 'React-KeyView' เช่น

 import { Grid , Table } from "react-keyview" ;

หรือคุณสามารถนำเข้าส่วนประกอบที่คุณต้องการได้โดยตรงเช่น

 import Grid from "react-keyview/build/Grid" ;
import Table from "react-keyview/build/Table" ;

โมดูล UMD มีคำนำหน้า ReactKV เช่น

 const Grid = ReactKVGrid ;
const List = ReactKVList ; 

รายการ

---

 function renderRow ( rowIndex , currentIndex ) {
  return < div > { rowIndex } </ div > ;
}

< List renderRow = { this . renderRow } count = { YOUR_DATA . length } visibleCount = { 5 } rowHeight = { 50 } /> ;

ข้อต่อ	พิมพ์	คำอธิบาย
renderrow	การทำงาน	แสดงแถวเดียว
นับ	ตัวเลข	จำนวนองค์ประกอบ
Rowheight	ตัวเลข	ความสูงแถว
visibleCount	ตัวเลข	องค์ประกอบที่มองเห็นได้นับจำนวน
ดอม	วัตถุ	ผ่านแอตทริบิวต์ไปยังองค์ประกอบ HTML

โต๊ะ

---

 function renderHeader ( item ) {
  return item ;
}
function renderRowColumn ( i , j ) {
  var getRowColumn = DATA [ i ] [ header [ j ] ] ;
  return < td key = { UNIQUE_KEY } > { getRowColumn } </ td > ;
}

function renderRow ( rowIndex , currentIndex , col ) {
  return < tr key = { UNIQUE_KEY } > { col } </ tr > ;
}

< Table
  header = { header }
  renderHeader = { this . renderHeader }
  renderRow = { this . renderRow }
  columnCount = { 3 }
  count = { YOUR_DATA . length }
  visibleCount = { 5 }
  rowHeight = { 50 }
  renderRowColumn = { this . renderRowColumn }
/> ;

ข้อต่อ	พิมพ์	คำอธิบาย
visibleCount	ตัวเลข	จำนวนแถวที่มองเห็นได้
นับ	ตัวเลข	จำนวนแถว
ส่วนหัว	อาร์เรย์	ต้องเป็นสายของสตริง
หัวเรนเดอร์	การทำงาน	จำนวนคอลัมน์ที่มองเห็นได้
renderrow	การทำงาน	แสดงแถว
RenderRowColumn	การทำงาน	แสดงคอลัมน์ของแถว
ดอม	วัตถุ	ผ่านแอตทริบิวต์ไปยังองค์ประกอบ HTML

กริด

---

 function renderer ( { rowIndex , columnIndex , yIndex , xIndex } ) {
  return (
    < td key = { UNIQUE_KEY } >
      Item { columnIndex } , { rowIndex }
    </ td >
  ) ;
}

< Grid
  renderer = { this . renderer }
  visibleRows = { 6 }
  rowCount = { 100 }
  rowWidth = { 30 }
  columnCount = { 100 }
  visibleColumns = { 6 }
  columnHeight = { 50 }
/> ;

ข้อต่อ	พิมพ์	คำอธิบาย
คอลัมน์	ตัวเลข	จำนวนคอลัมน์
VisibleColumns	ตัวเลข	จำนวนคอลัมน์ที่มองเห็นได้
นักเลง	ตัวเลข	จำนวนบรรทัด
Visiblerows	ตัวเลข	จำนวนแถวที่มองเห็นได้
ผู้แสดงผล	การทำงาน	แสดงแถวและคอลัมน์
ดอม	วัตถุ	ผ่านแอตทริบิวต์ไปยังองค์ประกอบ HTML