給Jquery easyui 的datagrid 每行增長操做連接(轉)

時間 2019-11-09

標籤 jquery easyui datagrid 增長連接欄目 JQuery 简体版

原文原文鏈接

http://www.thinkphp.cn/code/207.htmljavascript

經過formatter方法給Jquery easyui 的datagrid 每行增長操做連接
咱們都知道Jquery的EasyUI的datagrid能夠添加而且自定義Toolbar，這樣咱們選擇一行而後選擇toolbar的相應按鈕就能夠對這行的數據進行操做。但實際項目裏咱們可能須要在每行後面加一些操做連接，最多見的就是好比「修改」、「刪除」、「查看」之類。以下圖：

這是個很實用的功能，可是搜索了一下，好像也沒見到誰寫過，我就找了Easyui的document，隨便寫一下，拋磚引玉。

思路：通常來說，增長操做連接就是要用URL+ID的方式把頁面跳轉到新頁面，因此須要在正常輸出的一行後面加一列操做列用來顯示操做連接。Easyui的Datagrid沒有直接添加link的屬性，因此我須要格式化一下這一「操做」列的輸出。

解決方法：

第一步，我須要在datagrid行裏添加一列，field指向id（field:'id'），而後對這列進行格式化處理（formater：格式化函數），以下：php

<th data-options="field:'id',width:180,formatter: rowformater">操做</th>

複製代碼

第二步：
根據documentation的描述，formatter的格式化函數有3個parameters，分別是：
value: the field value，也就是field:'id'。
rowData: the row record data。就是這一行的Json數據，包括你已經選擇在Datagrid上顯示的內容，和沒顯示的內容。由於個人Json數據裏包括了Id這一內容，因此我能夠直接調用。若是你做爲數據源的Json裏沒有Id屬性，須要修改一下Json的輸出。個人每行Json輸出是相似{"id":"1","name":"\u7ecf\u6d4e\u53d1\u5c55","parentId":"0"}的結構
rowIndex: the row index.當前行的Index。

因此我寫rowformater這個函數的時候，也須要用function rowformater(value,row,index)的方法。爲了看起來清晰明白，我只在函數裏寫了一句話（放在<head>標籤裏），事實上項目上須要作一些基本的判斷。：html