• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

DubFriend/CRUD: ajax crud ui generator

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

DubFriend/CRUD

开源软件地址:

https://github.com/DubFriend/CRUD

开源编程语言:

JavaScript 90.6%

开源软件介绍:

#CRUD ##For when you need to get some serious crud done.

Compatable with IE8+

CRUD generates a full featured ajax interface for Creating, Reading, Updating and Deleting Data.

CRUD makes RESTful AJAX requests to the url of your choosing, and makes no assumptions about the backend implementation. The example backend implementation here is written in PHP, but you are free to use any server side language or framework that you wish.

By default, CRUD will generate a flexible HTML markup, however you can also override these templates with your own custom template generators. (see example_bootstrap.html for a completely overriden example, as well as example_minimal.html as a starting point for building your own custom templates.)

##Example Usage

CRUD.full({
	//The name you are giving to this data collection (should be a single word)
    name: 'Thing',

    //the url that crud will make ajax requests to
    url: 'users.php',khkjh

    //for servers that do not support PUT or DELETE methods.
    //if set to true, POST, PUT, and DELETE requests will all be
    //POST requests with a url method parameter set to POST, PUT or DELETE.
    isSoftREST: false,

    //client side validation.
    validate: function (data) {
        var error = {};
        if(data.username.length < 6) {
            error.username = 'Username must be a minimum of 6 characters.';
        }
        return error;
    },

    //can optionaly disable delete functionality
    deletable: true,

    //readOnly will disable delete and edit functionality
    readOnly: false,

    //all items must have a unique id named "id".
    //however you can hide this field from the client interface,
    //simply do not include this field to hide id's.
    id: {
        orderable: true,
        order: 'ascending',
        label: 'id'
    },

    //The schema for each row of your data.
    schema: [
        {
        	//the name used "behind the scenes", (using the fieldname that corresponds)
        	//to your database often makes sense.
            name: 'username',
            //the name that the user sees in the interface.  If the label field is absent,
            //label will default to the "name" field above.
            label: 'Username',
            //the HTML input form type to use. (available options are
            //text, textarea, checkbox, radio, and select)
            type: 'text',
            //optionally set a default value to prepopulate the form when creating
            //a new data item.
            value: 'default'
        },
        {
            name: 'description',
            type: 'textarea',
            //if the orderable field is present, the interface will include a control to sort
            //the data items by this field. (It's up to you to implement this on the server)
            orderable: true,
            //set the default order to 'ascending', 'descending', or 'neutral'
            order: 'ascending'
        },
        {
            name: 'fruit',
            type: 'checkbox',
            values: [
                { value: 'apple', label: 'La Pomme' },
                { value: 'orange', label: 'L\'Orange' }
            ],
            //a checkbox group is the only fieldtype that holds multiple values (hence the array)
            value: ['orange']
        },
        {
            name: 'letter',
            type: 'radio',
            values: [
                { value: 'a', label: 'A' },
                { value: 'b' },
                { value: 'c' },
                { value: 'd', label: 'D' }
            ],
            value: 'b',
            orderable: true
        },
        {
            name: 'awesome',
            type: 'select',
            values: [
            	//note that all values should be of the type string
                { value: '1', label: 'One' },
                { value: '2', label: 'Two' },
                { value: '3', label: 'Three' }
            ]
        }
    ],

    //if instantFilter is set to true, the search module will respond without
    //the user having to click an "enter" button.
    instantFilter: true,
    //the schema used for the search module.  Follows the same format as the regular schema,
    //but does not support the "order" field.  Note that you will need to implement any
    //search (filter) functionality on the server.
    filterSchema: [
        {
            name: "Maximum_Awesome",
            label: "Awesome",
            type: 'select',
            values: [
                { value: '1', label: '<= One' },
                { value: '2', label: '<= Two' },
                { value: '3', label: '<= Three' }
            ],
            value: '3'
        },
        {
            name: "Textarea",
            label: "Textarea",
            type: 'text'
        },
        {
            name: "fruit",
            type: 'checkbox',
            values: [
                { value: 'apple', label: 'pomme' },
                { value: 'orange' }
            ]
        }
    ]
});

##Implementing the server

You may also see crud.php for a fully worked out example of a backend implementation

(the following examples assume the supplied base url is called "crud.php")

###GET GET requests are for retrieving data from the server.

All get requests are paginated, urls are of the format crud.php/page/page#?(order and filter parameters)

for example to get the 3rd page of results where "Textarea" is equal to "foo", and the results are ordered by 'letter', ascending, the request would be:

####Some example URL's items/page/2 items/page/5?filter_foo=val1&filter_bar=val2 items/page/1?order_foo=ascending&order_bar=descending items/page/7?filter_favorite_color=green&order_username=ascending

####GET Response

Responses to a get request must be a json response of the form:

{
	"pages": "number of pages of results for the given request",
	"data": "rows of the returned data (each row must include a field named "id")"
}

Note that all rows must return a unique identifier of the name "id".

Example:

{
	"pages": 7,
	"data": [
		{ "id": 2, "fieldA": "foo" },
		{ "id": 3, "fieldA": "bar" }
	]
}

###PUT PUT requests are for editing a single item of data that allready exists on the server.

PUT request urls are of the format crud.php/id

for example to edit the field with an id of 5 the url would be crud.php/5

the body of the request will be a single JSON object of the form { "fieldName": "new value", ... }

####PUT Response

If the update/edit is successfull, simply return true. If some server-side validation fails, you can return an error object of the same format in the client side validation. In this case, you will also need to set the HTTP response code to 409 (Conflict)

###POST POST requests are for creating a new data item. The request url will simply be the base url provided (crud.php in these examples). If successfull, the server should return the id of the newly created item. If server-side validation fails, return an error object with a HTTP response code of 409.

###DELETE DELETE requests are for deleting a single data item. DELETE requests have no body, and have a request url of the format crud.php/id

for example crud.php/5 should delete the data item with an id of 5.

Return true if the delete request is successfull. Return an error object with an HTTP response code of 409 if the item cannot be deleted.

##formList

CRUD.full({...}) creates a fully featured interface, with search and ordering features. Sometimes however, you know that you'll only ever have a few data items to deal with, and need a much lighter weight interface.

###Example Usage

The Configuration is the same as CRUD.full({}) only their are no filterSchema, id, or order fields.

CRUD.formList({
    name: 'Thing',
    url: 'crud.php',

    //isSoftREST: true,

    validate: function (data) {
        var error = {};
        if(data.text.length < 3) {
            error.text = '3 character minimum';
        }
        return error;
    },

    //deletable: false,
    //readOnly: true,

    schema: [
        {
            name: 'text',
            label: 'label yo',
            type: 'text',
            value: 'default'
        },
        {
            name: 'textarea',
            type: 'textarea',
            orderable: true,
            order: 'ascending'
        },
        {
            name: 'fruit',
            type: 'checkbox',
            values: [
                { value: 'apple', label: 'La Pomme' },
                { value: 'orange', label: 'L\'Orange' }
            ],
            value: ['orange']
        },
        {
            name: 'letter',
            type: 'radio',
            values: [
                { value: 'a', label: 'A' },
                { value: 'b' },
                { value: 'c' },
                { value: 'd', label: 'D' }
            ],
            value: 'b',
            orderable: true
        },
        {
            name: 'awesome',
            type: 'select',
            values: [
                { value: '1', label: 'One' },
                { value: '2', label: 'Two' },
                { value: '3', label: 'Three' }
            ]
        }
    ]
});

###GET A single GET request is made to the supplied url after being initiated. Unlike CRUD.full(), the GET request is not paginated. The server should respond by sending the appropriate data items using the same JSON format as in CRUD.full() (The "pages" field will be unecessary though).

###PUT, POST, DELETE Follow the same format as in CRUD.full()




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
mackliu/1101_ajax: AJAX技術概念與相關應用发布时间:2022-03-31
下一篇:
zev-deutsch/ajax-quiz: A simple jQuery AJAX example.发布时间:2022-03-31
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap