zoukankan      html  css  js  c++  java
  • 可编辑的table插件 简单用法理解

    先看效果,就酱,点击时显示弹框,修改后保存输入的值,当然还可以换成下拉框,选项框等来代替输入框,功能多样,结合bootstarp会变得更美观

    git地址:https://vitalets.github.io/x-editable/index.html

    第一步引包:<script src="/public/libs/assets/global/plugins/bootstrap-editable/bootstrap-editable/js/bootstrap-editable.js"

    第二步:初始化

    var FormEditable = function () {

    $.mockjaxSettings.responseTime = 500;

    var log = function (settings, response) {
    var s = [],
    str;
    s.push(settings.type.toUpperCase() + ' url = "' + settings.url + '"');
    for (var a in settings.data) {
    if (settings.data[a] && typeof settings.data[a] === 'object') {
    str = [];
    for (var j in settings.data[a]) {
    str.push(j + ': "' + settings.data[a][j] + '"');
    }
    str = '{ ' + str.join(', ') + ' }';
    } else {
    str = '"' + settings.data[a] + '"';
    }
    s.push(a + ' = ' + str);
    }
    s.push('RESPONSE: status = ' + response.status);

    if (response.responseText) {
    if ($.isArray(response.responseText)) {
    s.push('[');
    $.each(response.responseText, function (i, v) {
    s.push('{value: ' + v.value + ', text: "' + v.text + '"}');
    });
    s.push(']');
    } else {
    s.push($.trim(response.responseText));
    }
    }
    s.push('-------------------------------------- ');
    $('#console').val(s.join(' ') + $('#console').val());
    };

    var initAjaxMock = function () {
    //ajax mocks

    $.mockjax({
    url: '/post',
    response: function (settings) {
    log(settings, this);
    }
    });

    $.mockjax({
    url: '/error',
    status: 400,
    statusText: 'Bad Request',
    response: function (settings) {
    this.responseText = '请输入正确的值';
    log(settings, this);
    }
    });

    $.mockjax({
    url: '/status',
    status: 500,
    response: function (settings) {
    this.responseText = 'Internal Server Error';
    log(settings, this);
    }
    });

    $.mockjax({
    url: '/groups',
    response: function (settings) {
    this.responseText = [{
    value: 0,
    text: 'Guest'
    }, {
    value: 1,
    text: 'Service'
    }, {
    value: 2,
    text: 'Customer'
    }, {
    value: 3,
    text: 'Operator'
    }, {
    value: 4,
    text: 'Support'
    }, {
    value: 5,
    text: 'Admin'
    }];
    log(settings, this);
    }
    });

    }

    var initEditables = function () {

    //set editable mode based on URL parameter
    if (App.getURLParameter('mode') == 'inline') {
    $.fn.editable.defaults.mode = 'inline';
    $('#inline').attr("checked", true);
    } else {
    $('#inline').attr("checked", false);
    }

    //global settings
    $.fn.editable.defaults.inputclass = 'form-control';
    $.fn.editable.defaults.url = '/post';

    $('.username').editable({
    url: '/post',
    type: 'text',
    pk: 1,
    name: 'username',
    title: '请输入要修改的值',
    validate: function (value) {
    if ($.trim(value) == '') return '输入不能为空';
    },
    success: function (response, newValue) {

    var obj = {
    tid: $(this).attr('tid'),
    type: $(this).attr('type'),
    fieldName: $(this).attr('fieldName'),
    value: parseFloat(newValue),
    cityCode: selCityCode
    };
    console.log(obj);
    if (response.status == 'error') {
    return response.msg; //msg will be shown in editable form
    } else {
    //调用我的接口函数
    }

    }
    });

    }

    return {
    init: function () {

    // inii ajax simulation
    initAjaxMock();

    // init editable elements
    initEditables();


    }

    };

    }();
    jQuery(document).ready(function () {
    FormEditable.init();
    });
    //具体自己看代码吧。。。
  • 相关阅读:
    逆向project实战--Acid burn
    《图说VR入门》——DK2入门及其资源汇总
    (UML总结三)UML与软件project
    架构设计:负载均衡层设计方案(3)——Nginx进阶
    測试人员的核心能力与素养
    Codeforces Round #Pi (Div. 2)(A,B,C,D)
    ZOJ Problem Set
    Hive怎样加入第三方JAR
    使用ScriptEngineManager解析json
    java中servletContextListener、httpSessionListener和servletRequestListener使用整理
  • 原文地址:https://www.cnblogs.com/222tjr-blog/p/6781912.html
Copyright © 2011-2022 走看看