ایجاد jqGrid توسط WebService

در این مقاله می خواهیم یک jqGrid ایجاد کنیم، که داده هایش را از WebService دریافت می کند.

داده های ما بصورت استاتیک هستند اما اگر با WebService و jQuery کار کرده باشید به راحتی می توانید داده ها را بصورت داینامیک از بانک اطلاعاتی دریافت کنید.

گام اول:

اول از همه باید Library های مختلفی را در بخش head برنامه اضافه کنیم. این Library ها برای ساخت jqGrid به ما کمک می کنند.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/redmond/jquery-ui.css" />  
<link rel="stylesheet" type="text/css" href="/Scripts/jquery.jqGrid-3.7.2/css/ui.jqgrid.css" />  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>  
<script type="text/javascript" src="/Scripts/jquery.jqGrid-3.7.2/js/i18n/grid.locale-en.js"></script>  
<script type="text/javascript" src="/Scripts/jquery.jqGrid-3.7.2/js/jquery.jqGrid.min.js"></script>  
<script type="text/javascript" src="/Scripts/json2.js"></script>

حال، نیاز است که یک Table و یک div در قسمت body برنامه اضافه کنیم. table برای نمایش داده ها استفاده می شود و div برای صدا زدن صفحه های Grid می باشد. در div انواع بسیاری از لینک های مفید و دکمه ساخته می شود که به جا به جایی، جستجو، اضافه کردن، و بسیاری از کارهای دیگر در Grid کمک می کند.

<body>  
    <input type="button" id="btn1" value="نمایش" />  
    <table id="employeesList">  
    </table>  
    <div id="gridpager">  
    </div>  
</body>

همچنین یک دکمه برای اینکه بخواهیم Grid را نمایش دهیم، اضافه می کنیم.

گام دوم:

در این مرحله یک تگ script ایجاد کرده و کدهای زیر را در آن اضافه می کنیم.

<script type="text/javascript">  
    jQuery(document).ready(function () {  
        $('#btn1').click(function () {  
            debugger;  
            $("#employeesList").jqGrid({  
                url: '/ws/RubricaWS.asmx/GetProvinces',  
                datatype: 'json',  
                mtype: 'POST',  
                ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },  
                serializeGridData: function (postData) {  
                    return JSON.stringify(postData);  
                },  
                jsonReader: { repeatitems: false, root: "d.rows", page: "d.page", total: "d.total", records: "d.records" },  
                colModel: [  
                { name: 'ID', key: true, width: 60, align: "center", hidden: false },  
                { name: 'Department', width: 80, sortable: false, hidden: false },  
                { name: 'Name', width: 180, sortable: false, hidden: false },  
                { name: 'Address', width: 180, sortable: false, hidden: false }  
                ],  
                rowNum: 10,  
                rowList: [10, 20, 30],  
                pager: "#gridpager",  
                viewrecords: true,  
                gridview: true,  
                rownumbers: true,  
                height: 230,  
                caption: 'لیست کارمندان'  
            }).jqGrid('navGrid', '#gridpager', { edit: true, add: true, del: false, search: true });  
        });  
    });  
</script>

این کد برای ایجاد jqGrid می باشد. ابتدا آدرس متد WebService ایجاد می شود. سپس نوع و داده هایی که ارسال می شوند، ایجاد می شود، webmethod بعضی از اطلاعات را دریافت می کند، این اطلاعات توسط "serializedGridData" ایجاد می شوند. postData شامل بعضی از اطلاعات پیش فرض است که قبل از انتقال به webmethod در WebService به صورت stringfied می باشد.

jsonReader داده های code behind را دریافت خواهد کرد و آنها را در Grid پیاده سازی می کند. ColModel ستون Grid را می سازد. در اینجا می توانیم نام ستون ها را مشخص کنیم. همچنین می توانیم آنها را مخفی کنیم، تراز کنیم، مرتب کنیم، یا بسیاری از کارهای دیگر.

بعد از این، بعضی از اطلاعات مانند اینکه، در هر صفحه می خواهیم چقدر داده نمایش داده شود، برای اولین بار چقدر از داده ها نمایش داده شوند، مشخص شدن id مربوط به pager که برای ساخت جدول کامل grid، ترکیب شده است، طول، عرض، متن و بسیاری از موارد دیگر ایجاد می شوند.

در آخر، اطلاعات pager ساخته می شود. Add:true به معنی است که شما یک علامت "+" در grid خواهید دید که برای اضافه کردن سطر به grid می باشد.( اما چون تابع آن را ننوشتهایم، کار نخواهد کرد)، Edit:true برای این است که بتوانید یک سطر خاص را ویرایش کنید. search:true برای جستجو در داده های مربوط به ستون ها می باشد.اما بخاطر داشته باشید که هرآنچه که هرآنچه که اینجا true می شود به خودی خود کار نخواهد کرد و باید توابع و قابلیت آنها ایجاد و ساخته شوند.

مرحله سوم:

در این یک WebService به برنامه خود اضافه کنید.

در WebService یک کلاس با پارمترهایی شبیه نام ستون ها ایجاد کنید.

public class jqGridRecord {  
    public int ID {get; set;}  
    public string Department { get; set; }  
    public string Name {get; set;}  
    public string Address { get; set; }  
}

بعد از ساخت کلاس، یک رشته استاتیک،داده های Grid را مشخص می کند.

 private static string jsonData = "[{\"ID\":1,\"Department\":\".NET\",\"Name\":\"بهار\",\"Address\":\"تهران\"},{\"ID\":2,\"Department\":\".NET\",\"Name\":\"شیوا\",\"Address\":\"تهران\"},{\"ID\":3,\"Department\":\".NET\",\"Name\":\"زهرا\",\"Address\":\"تهران\"},{\"ID\":4,\"Department\":\"Testing\",\"Name\":\"نرگس\",\"Address\":\"تهران\"},{\"ID\":5,\"Department\":\"Tesing\",\"Name\":\"مریم\",\"Address\":\"تهران\"},{\"ID\":6,\"Department\":\"Marketting\",\"Name\":\"زینب\",\"Address\":\"تهران\"},{\"ID\":7,\"Department\":\".NET\",\"Name\":\"سیما\",\"Address\":\"تهران\"},{\"ID\":8,\"Department\":\"PHP\",\"Name\":\"آیدا\",\"Address\":\"تهران\"},{\"ID\":9,\"Department\":\"PHP\",\"Name\":\"بهار\",\"Address\":\"تهران\"},{\"ID\":10,\"Department\":\"Designing\",\"Name\":\"روشنا\",\"Address\":\"تهران\"},{\"ID\":11,\"Department\":\"Testing\",\"Name\":\"پارمیس\",\"Address\":\"تهران\"}]";

بعد از این مرحله، یک WebMethod می سازیم که بعضی از پارامترها را که از "json.stringfy" فرستاده شده اند را، دریافت کند.

در اینجا یک لیست ساخته ایم که داده های deserialize را با خود خواهد داشت. داده ها سطر به سطر در لیست وارد می شوند و در آخر تمام داده ها با بعضی اطلاعات مثل تعداد رکوردها، تعداد صفحه های بازگشت داده شده به کد jquery در صفحه aspx. که متصل شده اند،انجام خواهد شد.

[WebMethod, ScriptMethod(ResponseFormat = ResponseFormat.Json)]  
public JqGridData GetProvinces (int page, int rows, string sidx, string sord, bool _search) {  
    JavaScriptSerializer ser = new JavaScriptSerializer ();  
    List<jqGridRecord> data = ser.Deserialize<List<jqGridRecord>> (jsonData);  
    int recordsCount = data.Count;  
    int startIndex = (page - 1) * rows;  
    int endIndex = (startIndex + rows < recordsCount) ? startIndex + rows : recordsCount;  
    List<jqGridRecord> gridRows = new List<jqGridRecord> (rows);  
    for (int i = startIndex; i < endIndex; i++)  
        gridRows.Add (data[i]);  
  
    return new JqGridData() {  
        total = (recordsCount + rows - 1) / rows,  
        page = page,  
        records = recordsCount,  
        rows = gridRows  
    };  
}

با اجرای برنامه خواهید دید که با کلیک روی دکمه، grid نمایش داده خواهد شد.

فایل های ضمیمه

3404_WebServicesPostToJqGrid.rar

مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

دوره های در حال ثبت نام آکادمی برنامه نویسان

ایجاد jqGrid توسط WebService

فایل های ضمیمه

برنامه نویسان

اگر نیاز به یک مشاور در زمینه طراحی سایت ، برنامه نویسی و بازاریابی الکترونیکی دارید