Блог

В настоящее время я использую MVC для настройки jqGrid. Я пытаюсь создать таблицу для ролей пользователей. В одном столбце должен быть пользователь, в одном столбце должна быть роль. Не слишком сложно. Однако в настоящее время они отформатированы как строки, и просмотр длинных строк идентификаторов не очень полезен. Итак, я хочу, чтобы идентификаторы были отформатированы как имя пользователя и имя роли, которым они соответствуют, но я все равно хочу, чтобы базовым значением были userId и RoleId, чтобы их было легко редактировать и вносить изменения. В настоящее время у меня это есть, поэтому, когда вы переходите к их редактированию, появится выпадающее окно, которое форматирует идентификатор пользователя как имя пользователя, сохраняя при этом значение идентификатора пользователя, но я не знаю, как сделать так, чтобы оно отображалось таким образом, когда я не редактирую…

Вот код для выпадающего списка.

     private void SetUpUserNameColumn(JQGrid userRoleGrid)
    {
        // setup the grid search criteria for the columns
        JQGridColumn userIdColumn = userRoleGrid.Columns.Find(c => c.DataField == "UserId");
        userIdColumn.Editable = true;
        userIdColumn.EditType = EditType.DropDown;

        // Populate the search dropdown only on initial request, in order to optimize performance
        if (userRoleGrid.AjaxCallBackMode == AjaxCallBackMode.RequestData)
        {
            var db = new ApplicationDbContext();
            var editList = from user in db.Users
                           select new SelectListItem
                           {
                               Text = user.UserName,
                               Value = user.UserId
                           };

            userIdColumn.EditList = editList.ToList();
        }
    }
  

Решение, которое мы используем, заключается в добавлении пользовательского форматирования к этому столбцу. Вот соответствующий код для этого.

1. При создании вашей сетки в коде вы захотите добавить пользовательский формат, как показано ниже.

    var jqGrid = new JQGrid 
   {
       Columns = 
       { 
           new JQGridColumn
           { 
               HeaderText = "Role"
             , DataField  = "RoleId"
             , Formatter  = new CustomFormatter { FormatterFunction = "RoleFormatter" }
           }
       }
   };
     

2. Затем вам нужно будет написать функцию RoleFormatter на JS и добавить ее в свое представление.

    <script>
       function RoleFormatter(cellValue, options, rowObject) {
   
           if(cellValue == '1') return 'Admin'
           if(cellValue == '2') return 'Client'
           if(cellValue == '3') return 'Lucky'
   
           return cellValue;
       }
   </script>
     

И это все. В столбце отображается возвращаемое значение форматирования, при этом фактически задается идентификатор роли.