JTable - 如何为输入表单自定义css

Question

我在asp.net网络表单中有一个JTABLE网格。网格工作得很好。我需要在编辑行时修改输入表单。我想覆盖一些CSS或它使用的模板。我将开始扩展输入字段的长度。我该怎么做呢？覆盖它使用的css类？

这是我的代码。

 $('#AnswerTableContainer').jtable({
 ![enter image description here][1] title: 'Answers ',
  //sorting: true, //Enable sorting
  //defaultSorting: 'DisplayOrder ASC', //Set default sorting
  actions: {
    listAction: 'AdminTopicEdit.aspx/TopicAnswerList',
    createAction: 'AdminTopicEdit.aspx/TopicAnswerCreate',
    updateAction: 'AdminTopicEdit.aspx/TopicAnswerUpdate',
    deleteAction: 'AdminTopicEdit.aspx/TopicAnswerDelete'
  },
  fields: {
    OasisReviewTopicAnswerID: {
      key: true,
      list: false
    },
    OasisReviewTopicID: {
      title: 'OasisReviewTopicID',
      create: true,
      edit: true,
      list: true,
      input: function (data) {
        //if (data.value) {
        return '<input type="text" readonly class="jtable-input-readonly" name="OasisReviewTopicID" value="' + $('#OasisReviewTopicID').val() + '"/>';
        //} else {
        //nothing to worry about here for your situation, data.value is undefined so the else is for the create/add new record user interaction, create is false for your usage so this else is not needed but shown just so you know when it would be entered
        //}
      },
      width: '5%',
      visibility: 'hidden'
    },
    Answer: {
      title: 'Answer',
      width: '10%'
    },
    Description: {
      title: 'Description',
      width: '35%'
    },
    Description2: {
      title: 'Description2',
      width: '35%'
    },
    DisplayOrder: {
      title: 'DisplayOrder',
      width: '10%'
    },
  },
  formCreated: function (event, data) {
    //data.form.find('input[name="OasisReviewTopicID"]').attr('disabled', 'disabled');
  },
  formSubmitting: function (event, data) {
    //data.form.find('input[name="OasisReviewTopicID"]').val($('#o').val());
    //alert(data);
  },
  //Dispose validation logic when form is closed
  formClosed: function (event, data) {
  }
}); //JTable

Answer 1

您可以在formcreated事件中执行此操作：

formCreated: function (event, data) 
{
   data.form.validationEngine({ promptPosition: "Right", autoPositionUpdate: true});
   data.form.find('input').css('width','200px');
},

Answer 2

formCreated: function (event, data) 
{
 $('#Edit-Description').css({width: "300px" }).addClass('validate[required]');
  // data.form.find('input[name="Description"]').css({width: "300px" }).addClass('validate[required]');
},