将按钮添加到 dojo 数据网格

Question

我正在尝试向 Dojo Datagrid 添加一个删除按钮，我目前有以下 javascript：

function createGrid() {
    gridTmp = new dojox.grid.DataGrid({
        store: jsonStore,
        structure: [ 
            {name: "Report No", field:"inc_number"},
            {name: "Incident Date", field: "IncidentDate"},
            {name: "Report Date", field: "reportDate"},
            {name: "Location", field: "location"},
            {name: "Delete", field: "inc_number", formatter: getDelete}
        ],
        noDataMessage: 'No results returned'
    }, "grids");

    return gridTmp;
}
dojo.addOnLoad(function() {
    grid = createGrid();
    grid.startup();
});

function getDelete(item) {
   return "<button onclick=\"location.href='/report?command=delete&reportNo="
           + store.getIdentity(item) + "'\">Delete</button>";
}

每当我加载页面时，我只会得到一个空网格，并显示一条消息“抱歉，发生了错误”。如果我使用“getDelete”格式化程序删除最后一个字段，则数据网格填充得很好。我不确定我做错了什么，因此我们将不胜感激。

Answer 1

您在 getDelete 函数中犯了几个错误：

1. store 没有定义，可能你的意思是 jsonStore
2. 项目不是您存储的对象。它是属性，由“字段”（inc_number）指定

我认为这对你有用：

function getDelete(item) {
  return "<button onclick=\"location.href='/report?command=delete&reportNo=" 
    + item + "'\">Delete</button>";
}

Answer 2

试试这个：

var buttonFormatter = function(inValue, rowId, cellId, cellField){
    if (inValue == 'Button_1') {
    var new_button = new dijit.form.Button({ 
        label: 'Detail', showLabel: false,
        iconClass: "dijitEditorIcon dijitEditorIconInsertOrderedList",
        'class': 'gridButton'});
    new_button._destroyOnRemove = true;
    return new_button;
    }
    else if (inValue == 'Button_2') {
    var new_button = new dijit.form.Button({ 
        label: 'Detail', showLabel: false,
        iconClass: "dijitEditorIcon dijitEditorIconRemoveFormat",
        'class': 'gridButton'});
    new_button._destroyOnRemove = true;
    return new_button;
    }
    else if (inValue == 'Button_3') {
    var new_button = new dijit.form.Button({ 
        label: 'New', showLabel: false,
        iconClass: "dijitEditorIcon dijitEditorIconSelectAll",
        'class': 'gridButton'});
    new_button._destroyOnRemove = true;
    return new_button;
    }
    else return null;
};

有了这个结构定义：

var structureDictionary = {
            ...
            ...
    'schoolA': [[
        { name: ' ', field: 'Button_1', width: '22px', 
          styles: 'margin:0px; padding:0px; text-align: left;',
          formatter: buttonFormatter},
        { name: ' ', field: 'Button_3', width: '22px', 
          styles: 'margin:0px; padding:0px; text-align: left;',
          formatter: buttonFormatter},
        { name: 'School', field: 'school_name', width: '160px'},
        { name: 'District', field: 'district_name', width: '160px'},
        { name: 'Address', field: 'address', width: '100%'},
        { name: 'City', field: 'city', width: '120px'},
        { name: 'State', field: 'state', width: '40px'},
        { name: 'Zip', field: 'zip', width: '40px'},
        { name: 'VT', field: 'vt_account', width: '20px'}
        ]]
     }

然后：

var newStore = new dojo.data.ItemFileReadStore({url: DataURL + fragment});
// May need to force a load: newStore._forceLoad();
Grid.setStructure(structureDictionary['schoolA']);
Grid.setStore(newStore);
Grid.selection.clear();

最后是服务器上的一些 PHP： （我最初并不需要所有这些，但在需要时都可以使用， 这段代码几乎从不改变。）

$sql = "";

$sql =  "SELECT DISTINCT \n" .
"'Button_1' AS Button_1, \n" .
"'Button_2' AS Button_2, \n" .
"'Button_3' AS Button_3, \n" .
"us_schools.school_id AS school_id , \n" .
"us_schools.school_type AS school_type /* varchar(255) */, \n" .
"us_schools.school_name_pretty AS school_name /* varchar(255) */, \n" .
"us_schools.district_name AS district_name /* varchar(255) */, \n" .
"us_schools.address AS address /* varchar(255) */, \n" .
"us_schools.city AS city /* varchar(255) */, \n" .
"us_schools.state AS state /* varchar(255) */, \n" .
"us_schools.zip AS zip /* varchar(255) */, \n" .
"us_schools.zip_plus_4 AS zip_plus_four, \n" .
"CONCAT(us_schools.city, ', ', us_schools.state, ' ', IFNULL(us_schools.zip_plus_4, us_schools.zip)) AS city_state_zip /* varchar(255) */, \n" .
"us_schools.county AS county, \n" .
"us_schools.country AS country, \n" .
"us_schools.phone AS phone, \n" .
"us_schools.area_code AS area_code, \n" .
"us_schools.location_FIPS AS fips_code, \n" .
"us_schools.location_MSA AS msa, \n" .
"us_schools.location_PMSA AS pmsa, \n" .
"us_schools.private_school_coed AS private_school_coed, \n" .
"us_schools.private_school_religious AS private_school_religious, \n" .
"us_schools.private_school_religion AS private_school_religion, \n" .
"us_schools.private_school_type AS private_school_type, \n" .
"us_schools.higher_ed_information AS higher_ed_information, \n" .
"us_schools.higher_ed_email AS higher_ed_email, \n" .
"us_schools.higher_ed_web_url AS higher_ed_web_url, \n" .
"us_schools.higher_ed_fax AS higher_ed_fax, \n" .
"us_schools.university_type AS university_type, \n" .
"us_schools.jr_college_category AS jr_college_category, \n" .
"us_schools.jr_college_sub_category AS jr_college_sub_category, \n" . 
"IF(ISNULL(accounts.account_id), '', 'VT') AS vt_account \n" .
"FROM voicethread_sales.us_schools AS us_schools \n" .
"LEFT JOIN voicethread_sales.accounts AS accounts \n" .
"ON (us_schools.school_id = accounts.account_id) \n";

$whereClause = '';
// Code to populate where clause

$limitClause = '';
$limit = mysql_real_escape_string($_GET['limit'], $conn);
if (strlen($limit) > 0) $limitClause .= "LIMIT " . $limit;

// append the where clause to the SQL statement
if (strlen($whereClause) > 0) $sql .= "WHERE " . $whereClause;
if (strlen($limitClause) > 0) $sql .= "\n" . $limitClause;
$sql .= ";";

// for debugging uncomment the following two lines
// print $sql;
// exit;

$result = mysql_query($sql, $conn); 

$data = array('items' => array());

if(mysql_num_rows($result) > 0) {
while($row = mysql_fetch_assoc($result)) {
    $data['items'][] = $row;
}
}

header('Content-Type: application/json; charset=utf8');
echo json_encode($data);

你又回来做生意了