[eluser]Mizanur Islam Laskar[/eluser]
Hello everybody, how are you? I'm passing really some bad days with one of my development. I got an issue while implementing search feature in one of CI project. What I've done, only works for CRUD, but failed to understand how to implement General and Advance Search options to complete my application. I found a working demo in vicman's post, but the complete source is not there. Let me share my works so far as below:
My partial view (js part):
Code: var lastsel2; //save row ID of the last row selected
var searchColumn1;
jQuery().ready(function (){
jQuery("#list1").jqGrid({
url:'city_grid/list_all', //Backend controller function generating grid XML
editurl: 'city_grid/edit_test_save', //Backend controller function save inline updates
mtype : "post", //Ajax request type. It also could be GET
datatype: "xml", //supported formats XML, JSON or Arrray
colNames:['ID','Name','Country Code','District','Population','Action'], //Grid column headings
colModel:[
{name:'id',index:'id', width:35, align:"left", hidden: true},
{name:'name',index:'name', width:35, align:"left", editable:true, editoptions:{size:'35',maxlength:'255'}},
{name:'country_code',index:'country_code', width:15, align:"left", editable:true, editoptions:{size:'5',maxlength:'5'}},
{name:'district',index:'district', width:30, align:"left", editable:true, editoptions:{size:'15',maxlength:'15'}},
{name:'population',index:'population', width:15, align:"left", editable:true, editoptions:{size:'8',maxlength:'8'}},
{name:'act',index:'act', width:15, align:"center", editable:false, search:false},
],
rowNum:12,
autowidth: true,
autoheight: true,
height: 275,
rowList:[10,20,30],
pager: '#pager1',
toolbar: [true,"top"],
sortname: 'id',
viewrecords: true,
gridComplete: function(){
var ids = jQuery("#list1").getDataIDs();
for(var i=0;i < ids.length;i++){
var cl = ids[i];
se = "<input type='button' value='Save'>"; //checksave_in_city is a callback function to show the response of inline save controller function
ce = "<input type='button' value='Cancel' title='Cancel'>";
jQuery("#list1").setRowData(ids[i],{act:se+ce}); //Save and Cancel buttons inserted via jqGrid setRowData function
}
searchColumn1 = jQuery("#list1").jqGrid('getCol','name',true) //needed for live filtering search
},
onSelectRow: function(id){
if(id && id!==lastsel2){
jQuery('#list1').restoreRow(lastsel2); //restore last grid row
jQuery('#list1').editRow(id,true); //show form elements for the row selected to enable updates
lastsel2=id; //save current row ID so that when focus is gone it can be restored
}
},
//caption:" Inline Edit Example"
caption:" LIST OF CITIES<br />Search City: <input type='text' placeholder='Search' results='0' id='gridsearch1' />"
}).navGrid('#pager1',{edit:false,add:true,del:true,search:false},
{}, // default settings for edit
{closeAfterAdd : true}, // default settings for add
{}, // delete instead that del:false we need this
{}, // search options
{} /* view parameters*/
);
//for live filtering search
jQuery('#gridsearch1').keyup(function () {
var searchString1 = jQuery(this).val().toLowerCase();
jQuery.each(searchColumn1,function()
{
if(this.value.toLowerCase().indexOf(searchString1) == -1)
jQuery('#'+this.id).hide();
else
jQuery('#'+this.id).show();
});
})
});
function checksave_in_city(result)
{
if(result.responseText!='') alert(result.responseText);
else $("#list1").trigger("reloadGrid");
}
[eluser]Mizanur Islam Laskar[/eluser]
My Partial Controller
Code: function list_all ()
{
$page = isset($_POST['page'])?$_POST['page']:1; // get the requested page
$limit = isset($_POST['rows'])?$_POST['rows']:10; // get how many rows we want to have into the grid
$sidx = isset($_POST['sidx'])?$_POST['sidx']:'id'; // get index row - i.e. user click to sort
$sord = isset($_POST['sord'])?$_POST['sord']:''; // get the direction
if(!$sidx) $sidx =1;
$count = $this->city_model->num_of_cities('');
if( $count > 0 ) {
$total_pages = ceil($count/$limit); //calculating total number of pages
} else {
$total_pages = 0;
}
if ($page > $total_pages) $page=$total_pages;
$start = $limit*$page - $limit; // do not put $limit*($page - 1)
$start = ($start<0)?0:$start; // make sure that $start is not a negative value
$result = $this->city_model->sort_cities($sidx,$sord,$start,$limit,'');
if ( stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml") ) {
header("Content-type: application/xhtml+xml;charset=utf-8");
} else {
header("Content-type: text/xml;charset=utf-8");
}
$et = ">";
echo "<?xml version='1.0' encoding='utf-8'?$et\n";
echo "<rows>";
echo "<page>".$page."</page>";
echo "<total>".$total_pages."</total>";
echo "<records>".$count."</records>";
// be sure to put text data in CDATA
foreach($result as $row) {
echo "<row id='".$row->id."'>";
echo "<cell><![CDATA[".$row->id."]]></cell>";
echo "<cell><![CDATA[".$row->name."]]></cell>";
echo "<cell><![CDATA[".$row->country_code."]]></cell>";
echo "<cell><![CDATA[".$row->district."]]></cell>";
echo "<cell><![CDATA[".$row->population."]]></cell>";
echo "<cell></cell>";
echo "</row>";
}
echo "</rows>";
}
function edit_test_save()
{
switch($_POST['oper'])
{
case('add'):
$insert_date['id'] = '';
$insert_date['name'] = $_POST['name'];
$insert_date['country_code'] = $_POST['country_code'];
$insert_date['district'] = $_POST['district'];
$insert_date['population'] = $_POST['population'];
$r = $this->common_model->add_data('city',$insert_date);
echo $r;
break;
case('edit'):
$updated_data = array(
'name' => $_POST['name'],
'country_code' => $_POST['country_code'],
'district' => $_POST['district'],
'population' => $_POST['population']
);
$r = $this->common_model->update_data('id', $_POST['id'], 'city', $updated_data);
echo $r;
break;
case('del'):
$r = $this->common_model->delete_data('id', $_POST['id'], 'city');
echo $r;
break;
}// end switch
}
My Partial Model
Code: function num_of_cities($wh)
{
if( !empty($wh) )
{
$query = $this->db->query("SELECT * FROM city ".$wh);
}
else
{
$this->db->select('*');
$this->db->from('city');
$query = $this->db->get();
}
return $query->num_rows();
}
function sort_cities($sidx,$sord,$start,$limit,$wh)
{
if( !empty($wh) )
{
$query = $this->db->query("SELECT * FROM city ".$wh." ORDER BY ".$sidx." ".$sord." LIMIT ".$start.", ".$limit."");
}
else
{
$this->db->select('*');
$this->db->from('city');
$this->db->order_by($sidx, $sord);
$this->db->limit($limit, $start);
$query = $this->db->get();
}
return $query->result();
}
Any idea please? Thanks is advance.
|