abp使用easyui datagrid

// common.js
  1 var abp = abp || {};
  2 abp.common = abp.common || {};
  3 abp.common.IsTrueOrFalse = function (value) {
  4     //console.log(value);
  5     if (value) {
  6         return "<span class='label label-success'>是</span>";
  7     } else {
  8         return "<span class='label label-error'>否</span>";
  9     }
 10 };
 11 
 12 abp.grid = abp.grid || {};
 13 abp.grid = (function () {
 14     return function () {
 15         var defaults = {
 16             table: "#List",
 17             columns: null,
 18             url: "",
 19             sortName: "Id",
 20             sortOrder: "desc",
 21             width: SetGridWidthSub(10),
 22             height: SetGridHeightSub(45),
 23             fitColumns: true,
 24             pagination: true,
 25             pagePosition: "bottom",
 26             idField: "",
 27             pageSize: 30,
 28             pageList: [10, 30, 50, 75, 100],
 29             striped: true, //奇偶行是否区分
 30             singleSelect: true,//单选模式
 31             showHeader: true
 32         };
 33         var _init = function (options, otherparam) {
 34             $.extend(defaults, options);
 35             if (!defaults) {
 36                 console.log("options参数不能为空");
 37                 return;
 38             }
 39             var url = defaults.url;
 40             $(defaults.table).datagrid({
 41                 loader: function (param, success, error) {
 42                     $.extend(param, otherparam);
 43                     abp.ajax({
 44                         url: url,
 45                         data: JSON.stringify(param),
 46                         success: function (obj) {
 47                             //console.log(obj);
 48                             success(obj);
 49                         },
 50                         error: function (obj) {
 51                             //console.log(obj);
 52                         }
 53                     })
 54                 },
 55                 width: defaults.width,
 56                 height: defaults.height,
 57                 fitColumns: defaults.fitColumns,
 58                 sortName: defaults.sortName,
 59                 sortOrder: defaults.sortOrder,
 60                 idField: defaults.idField,
 61                 pageSize: defaults.pageSize,
 62                 pageList: defaults.pageList,
 63                 pagination: defaults.pagination,
 64                 pagePosition: defaults.pagePosition,
 65                 striped: defaults.striped, //奇偶行是否区分
 66                 singleSelect: defaults.singleSelect,//单选模式
 67                 showHeader: defaults.showHeader,//行号
 68                 columns: [defaults.columns]
 69             })
 70         };
 71         var _reloadList = function () {
 72             $(defaults.table).datagrid("reload");
 73         };
 74         var _loadList = function (param) {
 75             $(defaults.table).datagrid("load", param);
 76         };
 77         var _getSelected = function () {
 78             return $(defaults.table).datagrid('getSelected');
 79         };
 80         var _getSelections = function () {
 81             return $(defaults.table).datagrid('getSelections');
 82         }
 83 
 84         return { init: _init, reloadList: _reloadList, loadList: _loadList, getSelected: _getSelected, getSelections: _getSelections }
 85     }
 86 })();
 87 
 88 
 89 abp.dialog = abp.dialog || {};
 90 abp.dialog = {
 91     defaults: {
 92         Id: '#modalwindow',
 93         url: '',
 94         height: 500,
 95         width: 600,
 96         iconCls: 'fa fa-plus',
 97         title: ""
 98     },
 99     init: function (options) {
100         //console.log(this.defaults);
101         this.defaults = $.extend(this.defaults, options);
102         var $Id = $(this.defaults.Id);
103         $Id.html("<iframe width='100%' height='100%' scrolling='no' frameborder='0'' src='" + this.defaults.url + "'></iframe>");
104         $Id.window({ title: this.defaults.title, width: this.defaults.width, height: this.defaults.height, iconCls: this.defaults.iconCls }).window('open');
105     },
106     close: function () {
107         $(this.defaults.Id).window('close');
108     },
109     msthreesecond: function (content) {
110         $.msthreesecond(content);
111     }
112 
113 };

  1 @using Abp.Web.Mvc.Extensions
  2 @using BM.WMS.Authorization
  3 @using BM.WMS.Web.App_Start.Navigation
  4 @using BM.WMS.Web.Utils
  5 @{
  6     Layout = "~/Views/Shared/_Index_Layout.cshtml";
  7     ViewBag.CurrentPageName = PageNames.App.Common.Users;
  8 }
  9 <script src="~/Scripts/libs/jquery-cookie/jquery.cookie.min.js"></script>
 10 <script src="~/Areas/SystemInfo/Views/Common/_PermissionTree.js"></script>
 11 <form id="filterForm" class="horizontal-form">
 12     <div class="mvctool">
 13         <input name="Filter" type="text" placeholder='@L("UserName"),@L("Surname"),@L("Name"),@L("EmailAddress")' class="searchText" />
 14         @Html.ToolButton("btnQuery", "fa fa-search", L("Query"), "Query", true)
 15         @if (IsGranted(AppPermissions.Pages_Administration_Users_Create))
 16         {
 17             @Html.ToolButton("btnCreate", "fa fa-plus", L("Create"), "Create", true)
 18         }
 19         @Html.ToolButton("btnRefresh", "fa fa-refresh", L("Refresh"), "Refresh", true)
 20         @Html.ToolButton("btnExport", "fa fa-file-excel-o", L("ExportToExcel"), "Refresh", false)
 21     </div>
 22 </form>
 23 <div class="datagridui">
 24     <table id="List"></table>
 25 </div>
 26 <div id="modalwindow" class="easyui-window" style="width:800px; height:400px;" data-options="modal:true,closed:true,minimizable:false,shadow:false"></div>
 27 @Html.Partial("~/Views/Shared/_Partial_AutoGrid.cshtml")
 28 <script type="text/javascript">
 29     $(function () {
 30         var _grid;
 31         var _permissions = {
 32             create: abp.auth.hasPermission('Pages.Administration.Users.Create'),
 33             edit: abp.auth.hasPermission('Pages.Administration.Users.Edit'),
 34             changePermissions: abp.auth.hasPermission('Pages.Administration.Users.ChangePermissions'),
 35             //impersonation: abp.auth.hasPermission('Pages.Administration.Users.Impersonation'),
 36             'delete': abp.auth.hasPermission('Pages.Administration.Users.Delete')
 37         };
 38 
 39         var itemsColumns = [
 40                 {
 41                     field: 'id', title: app.localize('Actions'), width: '15%', align: 'center', formatter: function (value, row, index) {
 42                         var actionhtml = "";
 43                         //if (_permissions.impersonation && row.id != abp.session.userId) {
 44                         //    actionhtml += '<button class="btnLoginAs btn btn-default btn-xs" data-id="' + row.id + '" title="' + app.localize('LoginAsThisUser') + '"><i class="fa fa-sign-in"></i></button>';
 45                         //}
 46                         if (_permissions.edit) {
 47                             actionhtml += '<button class="btnUpdate btn btn-default btn-xs" data-id="' + row.id + '" title="' + app.localize('Edit') + '"><i class="fa fa-edit"></i></button>';
 48                         }
 49                         if (_permissions.changePermissions) {
 50                             actionhtml += '<button class="btnChangepermission btn btn-default btn-xs" data-id="' + row.id + '" title="' + app.localize('Permissions') + '"><i class="fa fa-list"></i></button>';
 51                         }
 52                         actionhtml += '<button class="btnUnlock btn btn-default btn-xs" data-id="' + row.id + '" title="' + app.localize('Unlock') + '"><i class="fa fa-unlock"></i></button>';
 53                         if (_permissions.delete) {
 54                             actionhtml += '<button class="btnDelete btn btn-default btn-xs" data-id="' + row.id + '" data-userName="' + row.userName + '" title="' + app.localize('Delete') + '"><i class="fa fa-trash-o"></i></button>';
 55                         }
 56                         return actionhtml;
 57                     }
 58                 },
 59                { field: "userName", title: app.localize('UserName'), sortable: true, width: '9%', align: 'center' },
 60                { field: "surname", title: app.localize('Surname'), sortable: true, width: '10%', align: 'center' },
 61                { field: "name", title: app.localize('Name'), sortable: true, width: '10%', align: 'center' },
 62                {
 63                    field: "roles", title: app.localize('Roles'), sortable: false, width: '12%', align: 'center',
 64                    formatter: function (value) {
 65                        var roleNames = '';
 66                        for (var j = 0; j < value.length; j++) {
 67                            if (roleNames.length) {
 68                                roleNames = roleNames + ', ';
 69                            }
 70                            roleNames = roleNames + value[j].roleName;
 71                        };
 72                        return roleNames;
 73                    }
 74                },
 75                 { field: "phoneNumber", title: app.localize('PhoneNumber'), sortable: true, width: '15%', align: 'center' },
 76                
 77                { field: "emailAddress", title: app.localize('EmailAddress'), sortable: true, width: '15%', align: 'center' },
 78                //{
 79                //    field: "isEmailConfirmed", title: app.localize('EmailConfirm'), sortable: true, width: '10%', align: 'center', formatter: function (value) {
 80                //        return abp.common.IsTrueOrFalse(value);
 81                //    }
 82                //},
 83                {
 84                    field: "isActive", title: app.localize('Active'), sortable: true, width: '6%', align: 'center', formatter: function (value) {
 85                        return abp.common.IsTrueOrFalse(value);
 86                    }
 87                },
 88                {
 89                    field: "lastLoginTime", title: app.localize('LastLoginTime'), sortable: true, width: '10%', align: 'center', formatter: function (value) {
 90                        if (value) {
 91                            return moment(value).format('YYYY-MM-DD HH:mm:ss');
 92                        }
 93                        else {
 94                            return "";
 95                        }
 96                    }
 97                },
 98                { field: "creationTime", title: app.localize('CreationTime'), sortable: true, width: '10%', formatter: function (value) { return moment(value).format('YYYY-MM-DD HH:mm:ss'); }, align: 'center' }
 99         ];
100         
101         var options = {
102             table: "#List",
103             columns: itemsColumns,
104             url: abp.appPath + 'api/services/app/user/GetUsers',
105             sortName: "Name",
106             sortOrder: "desc",
107             height: SetGridHeightSub(45),//设置datagird表格的高度（自适应高度）
108             //singleSelect: true,//单选模式
109             fitColumns: true,
110             pagination: true
111         }
112         _grid = new abp.grid();
113         _grid.init(options);
114 
115         var _createOrEditModal = new app.ModalManager({
116             viewUrl: abp.appPath + 'SystemInfo/Users/CreateOrEditModal',
117             scriptUrl: abp.appPath + 'Areas/SystemInfo/Views/Users/_CreateOrEditModal.js',
118             modalClass: 'CreateOrEditUserModal',
119             reloadList: _grid.reloadList
120         });
121 
122         var _userPermissionsModal = new app.ModalManager({
123             viewUrl: abp.appPath + 'SystemInfo/Users/PermissionsModal',
124             scriptUrl: abp.appPath + 'Areas/SystemInfo/Views/Users/_PermissionsModal.js',
125             modalClass: 'UserPermissionsModal'
126         });
127 
128         function createRequestParams() {
129             var prms = {};
130             $('#filterForm').serializeArray().map(function (x) { prms[x.name] = x.value; });
131             //console.log(prms);
132             return prms;
133         }
134 
135         $("#btnQuery").click(function (e) {
136             e.preventDefault();
137             _grid.loadList(createRequestParams());
138         });
139 
140         $('#filterForm').keydown(function (e) {
141             if (e.which == 13) {
142                 e.preventDefault();
143                 _grid.loadList(createRequestParams());
144             }
145         })
146 
147         $("#btnCreate").click(function (e) {
148             e.preventDefault();
149             //var options = {
150             //    title: app.localize("CreateNewUser"),
151             //    width: 600,
152             //    height: 770,
153             //    iconCls: 'fa fa-pencil',
154             //    url: 'Users/CreateOrEditModal'
155             //}
156             //abp.dialog.init(options);
157             _createOrEditModal.open();
158         });
159 
160         $("#btnRefresh").click(function (e) {
161             e.preventDefault();
162             _grid.reloadList();
163         })
164 
165         $('#btnExport').click(function () {
166             abp.services.app.user
167                 .getUsersToExcel({})
168                 .done(function (result) {
169                     app.downloadTempFile(result);
170                 });
171         });
172 
173         //$(".datagridui").on("click", ".btnLoginAs", function () {//这个功能不太成熟  -_-
174         //    var self = $(this);
175         //    var id = self.attr("data-id");
176         //    app.utils.removeCookie(abp.security.antiForgery.tokenCookieName);
177         //    abp.ajax({
178         //        url: abp.appPath + 'Account/Impersonate',
179         //        data: JSON.stringify({
180         //            tenantId: abp.session.tenantId,
181         //            userId: id
182         //        })
183         //    });
184         //})
185 
186         $(".datagridui").on("click", ".btnUpdate", function () {
187             var self = $(this);
188             var id = self.attr("data-id");
189             //var options = {
190             //    title: app.localize("EditUser"),
191             //    width: 600,
192             //    height: 770,
193             //    iconCls: 'fa fa-pencil',
194             //    url: 'Users/CreateOrEditModal?id=' + id
195             //}
196             //abp.dialog.init(options);
197             _createOrEditModal.open({ id: id });
198         })
199 
200         $(".datagridui").on("click", ".btnChangepermission", function () {
201             var self = $(this);
202             var id = self.attr("data-id");
203             //var options = {
204             //    title: app.localize("ChangingPermissions"),
205             //    width: 600,
206             //    height: 770,
207             //    iconCls: 'fa fa-pencil',
208             //    url: 'Users/PermissionsModal?id=' + id
209             //}
210             //abp.dialog.init(options);
211             _userPermissionsModal.open({ id: id });
212         })
213 
214 
215         $(".datagridui").on("click", ".btnUnlock", function () {
216             var self = $(this);
217             var id = self.attr("data-id");
218             var userName = self.attr("data-userName");
219             //$.messager.confirm(app.localize('Tip'),
220             abp.message.confirm(
221                 app.localize('UnlockedTheUser', userName),
222                 function (isConfirmed) {
223                     if (isConfirmed) {
224                         var parma = { id: id };
225                         abp.services.app.user.unlockUser(parma).done(function () {
226                             _grid.reloadList();
227                             //$.msthreesecond(app.localize('UnlockedTheUser', userName));
228                             abp.notify.success(app.localize('UnlockedTheUser', userName));
229                         });
230                     }
231                 }
232           );
233         })
234 
235         $(".datagridui").on("click", ".btnDelete", function () {
236             var self = $(this);
237             var id = parseInt(self.attr("data-id"));
238             var userName = self.attr("data-userName");
239             abp.message.confirm(
240                app.localize('UserDeleteWarningMessage', userName),
241                function (isConfirmed) {
242                    if (isConfirmed) {
243                        var parma = { id: id };
244                        abp.services.app.user.deleteUser(parma).done(function () {
245                            _grid.reloadList();
246                            abp.notify.success(app.localize('SuccessfullyDeleted'));
247                        });
248                    }
249                }
250            );
251         })
252     })
253 </script>

posted @ 2018-04-10 15:00 老板栗阅读(1085) 评论(0) 收藏举报

刷新页面返回顶部

小板栗

abp使用easyui datagrid

公告