Skip to content

django utilities allowing easy handling and configuration of jqGrids

License

Notifications You must be signed in to change notification settings

gerry/django-jqgrid

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

42 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

django-jqgrid

django-jqgrid aims to make integrating jqgrid in your django project as simple as defining which models you want exposed, while supporting the more advanced features.

Prerequisites

Example

  1. First define your grid somewhere (e.g., grids.py). Only a model or queryset and a url are required.
	class ExampleGrid(JqGrid):
    	model = SomeFancyModel # could also be a queryset
    	fields = ['id', 'name', 'desc'] # optional 
    	url = reverse_lazy('your_app_name:grid_handler')
    	caption = 'My First Grid' # optional
    	colmodel_overrides = {    # optional
       		'id': { 'editable': False, 'width':10 },
   	 	}
  1. Create views to handle requests.
	def grid_handler(request):
    	# handles pagination, sorting and searching
    	grid = ExampleGrid()
    	return HttpResponse(grid.get_json(request), content_type="application/json")

	def grid_config(request):
    	# build a config suitable to pass to jqgrid constructor   
    	grid = ExampleGrid()
    	return HttpResponse(grid.get_config(), content_type="application/json")
  1. Define urls for those views.
	url(r'^examplegrid/$', grid_handler, name='grid_handler'),
	url(r'^examplegrid/cfg/$', grid_config, name='grid_config'),
  1. Configure jgrid to use the defined urls.
    {% load static %}
    
    <table id="my_grid"></table>
    <div id="my_grid_nav"></div>

    # don't forget to include jQuery first
    <link rel="stylesheet" href="{% static 'jqgrid/css/ui.jqgrid-bootstrap.css' %}">
    <script src="{% static 'jqgrid/js/jquery.jqGrid.js' %}"></script>
    <script src="{% static 'jqgrid/js/i18n/grid.locale-en.js' %}"></script>

    <script>
        $.ajax({
            method: 'GET',
            url: "{% url 'your_app_name:grid_config' %}",
            success: function (data) {
                $("#my_grid")
                        .jqGrid(data)
                        .navGrid('#my_grid_nav',
                                {add: false, edit: false, del: false, view: true},
                                {}, // edit options
                                {}, // add options
                                {}, // del options
                                {multipleSearch: true, closeOnEscape: true}, // search options
                                {jqModal: false, closeOnEscape: true} // view options
                        )
            },
            error: function (data) {
                alert("An error occurred!");
                console.log(data);
            },
        })
    </script>

About

django utilities allowing easy handling and configuration of jqGrids

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages