adding button to dojo datagrid
I am trying to add a delete button to the Dojo Datagrid and I currently have the following 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>";
}
Whenever I load the page I only get an empty grid with a message "sorry an error occurred." If I remove the last field with the "getDelete" formatter, the datagrid populates just fine. I am not sure what I am doing wrong so any help would be appreciated.
You made several errors in your getDelete function:
- store is not defined, probably you meant jsonStore
- item is not object from you store. It is property, specified by "field" (inc_number)
I think this will work for you:
function getDelete(item) {
return "<button onclick=\"location.href='/report?command=delete&reportNo="
+ item + "'\">Delete</button>";
}
Try this:
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;
};
With this structure definition:
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'}
]]
}
Then:
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();
And finally some PHP on the server: (I don't initially need all of this but it's all available when needed, this code nearly never changes.)
$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);
And you're back in business
精彩评论