0527总结

实体账户前端页面和后端部分修改，遇到了不少问题，大部分都解决了，晚上咨询了一个前端舍友，最后把所有问题都解决的差不多了。 上代码和注释

前台channel.html

{% extends "base.html" %}
{% load staticfiles %}

{% block title %}实体账户{% endblock %}

{% block content %}

    <!-- 右侧最上方 -->
    <section class="content-header">
        <h1>
            实体账户
            <small>{{ allHtml.title }}</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i>PY</a></li>
            <li class="active">实体账户</li>
        </ol>
    </section>
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#fa-icons" data-toggle="tab">实体账户</a></li>
                    </ul>

                    <div class="tab-content ">
                        <div class="tab-pane active mailbox-messages" id="fa-icons">
                            <div class=" mailbox-messages">
                                <table id="toolbar"></table>
                                <table class="table table-bordered table-striped table-hover" id="InstrumentTable">
                                    <!--此处是bootstrap渲染页面，用到initbootstrap，id来做主键-->

                                </table>
                            </div>
                        </div>
                        <div class="tab-pane" id="glyphicons">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<!--下面是新增、修改和删除的模态框-->
    <!-- class model 的 add change模态框 -->
    <div class="modal fade" id="modal_model_field">
        <div class="modal-dialog" style=" 450px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body" style="padding: 30px;height:auto">
                    <form>
                        <div style="margin-top:3%"><label>通道ID</label><input class="opts" id="channelid"
                                                                             name="channelid" type="text"
                                                                             placeholder="通道ID"></div>
                        <div style="margin-top:3%"><label>外部接口类型</label>
                            <!--select框，写或者不写name都可以-->
                            <select class="opts" id="apitype" name="apitype">
                                <option name="apitype" value="1">
                                    CTP
                                </option>
                                <option name="apitype" value="3">
                                    FEMAS
                                </option>
                                <option name="apitype" value="4">
                                    SIM
                                </option>
                                <option name="apitype" value="5">
                                    UFX
                                </option>
                                <option name="apitype" value="6">
                                    CFETS
                                </option>
                                <option name="apitype" value="7">
                                    SIP
                                </option>
                                <option name="apitype" value="8">
                                    CFETS_xQuant
                                </option>
                                <option name="apitype" value="9">
                                    MDCenter
                                </option>
                                <option name="apitype" value="a">
                                    QBMD
                                </option>
                            </select>
                        </div>
                        <div style="margin-top:3%"><label>通道类型</label>
                  <!--option设置display：none是因为有时需要展示两（三）个，有时需要展示一个-->
                            <select class="opts" id="terminaltype" name="terminaltype">
                                <option value="1" id="tmtype_td" style="display: none">
                                    TRADE
                                </option>
                                <option value="2" id="tmtype_md" style="display: none">
                                    MARKET
                                </option>
                                <option value="3" id="tmtype_bt" style="display: none">
                                    BOTH
                                </option>
                            </select>
                        </div>
                        <div style="margin-top:3%"><label>交易账号</label><input class="opts" id="userid"
                                                                             name="userid"
                                                                             type="text" placeholder="交易账号"></div>
                        <div style="margin-top:3%"><label>登录密码</label><input class="opts" id="password" name="password"
                                                                             type="text" placeholder="登录密码"></div>
                        <!--此处是一个checkbox框，jq中用$("#ismd5").is(':checked')的bool值来表示是否选中-->
                        <div style="margin-top:3%"><input class="opts" id="ismd5" name="ismd5" type="checkbox">已加密
                            <!--以下是根据接口类型展示的地址Input框，在提交时，把所有的值做一些处理后放到一个框，相反，做展示时，把地址列表的值拆分后放到各个地址input框中-->
                            <div style="margin-top:3%;display: none" id="jy"><label>交易地址</label>
                                <input class="opts" id="id_trade" name="trade" type="text" placeholder="交易地址">
                            </div>
                            <div style="margin-top:3%;display: none" id="qq"><label>请求地址</label>
                                <input class="opts" id="id_qq" name="qq" type="text" placeholder="请求地址">
                            </div>
                            <div style="margin-top:3%;display: none" id="hq"><label>行情地址</label>
                                <input class="opts" id="addresslist" name="addresslist" type="text"
                                       placeholder="行情地址">
                            </div>
                            <div style="margin-top:3%;display: none" id="xxts"><label>消息推送地址</label>
                                <input class="opts" id="id_news" name="news" type="text" placeholder="消息推送地址">
                            </div>
                            <div style="margin-top:3%;display: none" id="fwq"><label>服务器地址</label>
                                <input class="opts" id="id_fwq" name="fwq" type="text" placeholder="服务器地址">
                            </div>
                            <div style="margin-top:3%;display: none" id="xxzx"><label>消息中心地址</label>
                                <input class="opts" id="id_xxzx" name="xxzx" type="text" placeholder="消息中心地址">
                            </div>
                            <div style="margin-top:3%;display: none" id="xxfw"><label>信息服务地址</label>
                                <input class="opts" id="id_xxfw" name="xxfw" type="text" placeholder="信息服务地址">
                            </div>
                            <div style="margin-top:3%"><label>收盘时间</label><input class="opts" id="closetimepoint"
                                                                                 name="closetimepoint"
                                                                                 type="text" placeholder="收盘时间"></div>
                            <div style="margin-top:3%"><label>日志级别</label>
                                <select name="loglevel" class="form-control" id="loglevel">
                                    <option value="0">关闭</option>
                                    <option value="1">严重</option>
                                    <option value="2">错误</option>
                                    <option value="3">报警</option>
                                    <option value="4">信息</option>
                                    <option value="5">调试</option>
                                    <option value="6">跟踪</option>
                                </select>
                            </div>
                            <div style="margin-top:3%"><label>接口扩展信息</label>
                                <textarea name="extendinfo" cols="40" rows="10" class="form-control" id="extendinfo">
                                </textarea>
                            </div>
                            <div style="margin-top:3%"><label>是否启用</label>
                                <select class="opts" id="isactive" name="isactive">
                                    <option name="isactive" value="0">
                                        否
                                    </option>
                                    <option name="isactive" value="1">
                                        是
                                    </option>
                                </select>
                            </div>

                            <div style="margin-top:3%">
                                <!--提交方法，先通过gets拿到值，再通过sub方法发送post请求到后台-->
                                <span style="margin-left:10%;cursor:pointer;padding:5px" class="btn-primary"
                                      onclick="sub(gets)">提交
                                </span>
                                <!--点击取消，即隐藏模态框-->
                                <span style="cursor:pointer;margin-left:60%;padding:5px" onclick="fad()"
                                      class="btn-success">取消</span>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


    <!-- 删除 -->
    <div class="modal fade" id="modal_delete">
        <div class="modal-dialog" style=" 300px;background-color:#eee">
            <div class="modal-content">
                <div class="modal-body" style="padding:5px;height:80px;overflow:auto">
                    <div>
                        <p style="margin-top:10px;margin-left:5px;">是否确定删除实体账户</p>
                        <div>
                            <span id="del" sid="" onclick="quit__()"
                                  style="padding:2px;cursor:pointer;float:right;margin-right:10px" class="btn-success">取消</span>
                            <span onclick="del_()" style="padding:2px;cursor:pointer;float:right;margin-right:10px"
                                  class="btn-success">确定</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<!--希望后台传值给它，然后再判断有值时，肯定是修改，无值时肯定是新增，但是出了create方法，这个值就取不到了，不知道为什么-->
<input style="display: none" id="ischange">
{% endblock %}


{% block scripts %}

    <script type="text/javascript">

        //定义全局变量，也可以用JQ,直接类选择器
        var channelid = document.getElementById("channelid")
        var apitype = document.getElementById("apitype")
        var terminaltype = document.getElementById("terminaltype")
        var userid = document.getElementById("userid")
        var isactive = document.getElementById("isactive")


        //模态框隐藏时触发,将上一次选中的各种地址input框display置为none,
        //把修改页面的禁用去除掉
        $("#modal_model_field").on('hidden.bs.modal', function () {
            console.log("触发了隐藏")
            //地址元素获取
            var address_hq = document.getElementById("hq")
            var address_jy = document.getElementById("jy")
            var address_xxts = document.getElementById("xxts")
            var address_fwq = document.getElementById("fwq")
            var address_xxzx = document.getElementById("xxzx")
            var address_qq = document.getElementById("qq")
            var address_xxfw = document.getElementById("xxfw")
			//通道类型元素获取
            var channel_tdtype = document.getElementById("tmtype_td")
            var channel_mdtype = document.getElementById("tmtype_md")
            var channel_bttype = document.getElementById("tmtype_bt")

            {#tmtype.value = ""#}
            //初始化前全部置为空
            address_hq.style.display = "none";
            address_jy.style.display = "none";
            address_xxts.style.display = "none";
            address_fwq.style.display = "none";
            address_xxzx.style.display = "none";
            address_qq.style.display = "none";
            address_xxfw.style.display = "none";

            channel_bttype.style.display = "none";
            channel_tdtype.style.display = "none";
            channel_mdtype.style.display = "none";


            //去除修改页面的禁用
            channelid.removeAttribute("readonly")
            apitype.removeAttribute("diasbled")
            terminaltype.removeAttribute("diasbled")
            userid.removeAttribute("readonly")
            isactive.removeAttribute("diasbled")
        })

        //外部接口监听事件
		//打算用监听事件，监听判断是否新增还是删除的按钮，但是不起作用
        $("#ischange").on('change', function () {
            console.log('1')
            console.log($("#ischange").val())
            console.log('2')
        })
            //外部接口的监听事件，可动态展示地址框，通道类型（内部嵌套一个监听事件，单独判断交易和行情的展示）
        $('#apitype').on('change', function () {
            var tmtype = $("select[name=apitype]").val();
            var termtype = $("select[name=terminaltype]").val("") //接口改变，通道都置为空
            {#console.log(tmtype)#}
            {#console.log(termtype)#}
            console.log("新建的监听")
            {#var tmtype = document.getElementById("id_terminaltype")#}
            var address_hq = document.getElementById("hq")
            var address_jy = document.getElementById("jy")
            var address_xxts = document.getElementById("xxts")
            var address_fwq = document.getElementById("fwq")
            var address_xxzx = document.getElementById("xxzx")
            var address_qq = document.getElementById("qq")
            var address_xxfw = document.getElementById("xxfw")

            var channel_tdtype = document.getElementById("tmtype_td")
            var channel_mdtype = document.getElementById("tmtype_md")
            var channel_bttype = document.getElementById("tmtype_bt")

            {#tmtype.value = ""#}
            address_hq.style.display = "none";
            address_jy.style.display = "none";
            address_xxts.style.display = "none";
            address_fwq.style.display = "none";
            address_xxzx.style.display = "none";
            address_qq.style.display = "none";
            address_xxfw.style.display = "none";

            channel_bttype.style.display = "none";
            channel_tdtype.style.display = "none";
            channel_mdtype.style.display = "none";


            if (tmtype == 1) { // CTP被选中
                channel_tdtype.style.display = "block";
                channel_mdtype.style.display = "block";
                address_hq.style.display = "block";
                address_jy.style.display = "block";
                $("#terminaltype").change(function () {
                    var ttype = $("select[name=terminaltype]").val()
                    {#console.log(ttype)#}
                    {#alert(ttype)#}
                    if (ttype == "1") {
                        address_hq.style.display = "none";
                        address_jy.style.display = "block";
                    } else if (ttype == "2") {
                        address_jy.style.display = "none"
                        address_hq.style.display = "block";
                    } else {
                        address_hq.style.display = "block";
                        address_jy.style.display = "block";
                    }
                })

            } else if (tmtype == 3) { // FEMAS被选中
                {#$("select[name=terminaltype]").val("")#}
                channel_tdtype.style.display = "block";
                channel_mdtype.style.display = "block";
                address_hq.style.display = "block";
                address_jy.style.display = "block";
                $("#terminaltype").change(function () {
                    var ttype = $("select[name=terminaltype]").val()
                    {#console.log(ttype)#}
                    {#alert(ttype)#}
                    if (ttype == "1") {
                        address_hq.style.display = "none";
                        address_jy.style.display = "block";
                    } else if (ttype == "2") {
                        address_jy.style.display = "none"
                        address_hq.style.display = "block";
                    } else {
                        address_hq.style.display = "block";
                        address_jy.style.display = "block";
                    }
                })
            } else if (tmtype == 4) { //SIM被选中
                {#$("select[name=terminaltype]").val("")#}
                channel_tdtype.style.display = "block";
                channel_mdtype.style.display = "block";
                channel_bttype.style.display = "block";
                address_fwq.style.display = "block";
                address_hq.style.display = "none";
                address_jy.style.display = "none";
                $("#terminaltype").change(function () {
                    address_hq.style.display = "none";
                    address_jy.style.display = "none";
                })
            } else if (tmtype == 5) { //UFX被选中
                {#$("select[name=terminaltype]").val("")#}
                channel_tdtype.style.display = "block";
                address_jy.style.display = "block";
                address_xxzx.style.display = "block";
                address_hq.style.display = "none";
                $("#terminaltype").change(function () {
                    address_hq.style.display = "none";
                    address_jy.style.display = "block";
                })
            } else if (tmtype == 6) { //CFETS被选中
                {#$("select[name=terminaltype]").val("")#}
                channel_tdtype.style.display = "block";
                channel_mdtype.style.display = "block";
                address_jy.style.display = "block";
                address_hq.style.display = "block";
                $("#terminaltype").change(function () {
                    var ttype = $("select[name=terminaltype]").val()
                    {#console.log(ttype)#}
                    {#alert(ttype)#}
                    if (ttype == "1") {
                        address_hq.style.display = "none";
                        address_jy.style.display = "block";
                    } else if (ttype == "2") {
                        address_jy.style.display = "none"
                        address_hq.style.display = "block";
                    } else {
                        address_hq.style.display = "block";
                        address_jy.style.display = "block";
                    }
                })
            } else if (tmtype == 8) { //CFETS_xQuant被选中
                channel_tdtype.style.display = "block";
                channel_mdtype.style.display = "block";
                channel_bttype.style.display = "block";
                address_qq.style.display = "block";
                address_hq.style.display = "block";
                address_xxts.style.display = "block";
                $("#terminaltype").change(function () {
                    address_hq.style.display = "block";
                    address_jy.style.display = "none";
                })
            } else if (tmtype == 7) { //SIP被选中
                channel_mdtype.style.display = "block";
                address_hq.style.display = "block";
                address_xxfw.style.display = "block";
                $("#terminaltype").change(function () {
                    address_hq.style.display = "block";
                    address_jy.style.display = "none";
                })
            } else if (tmtype == 9) { //MDCenter被选中
                channel_mdtype.style.display = "block";
                address_hq.style.display = "block";
                address_xxfw.style.display = "block";
                $("#terminaltype").change(function () {
                    address_hq.style.display = "block";
                    address_jy.style.display = "none";
                })
            } else if (tmtype == "a") { //QBMD被选中
                channel_mdtype.style.display = "block";
                address_hq.style.display = "block";
                $("#terminaltype").change(function () {
                    address_hq.style.display = "block";
                    address_jy.style.display = "none";
                })
            }

        })


        function gets() {

            //实体账户提交，对不同地址进行拼接

            <!--先获取各个地址input的值，有则取，无则空-->
            var address_hq_value = $("#addresslist").val()
            var address_jy_value = $("#id_trade").val()
            var address_xxts_value = $("#id_news").val()
            var address_fwq_value = $("#id_fwq").val()
            var address_xxzx_value = $("#id_xxzx").val()
            var address_qq_value = $("#id_qq").val()
            var address_xxfw_value = $("#id_xxfw").val()
            //有三种情况，分别是一个，两个和三个的地址，根据修改意见做的完善，用;合并或者切割
            if (address_jy_value) {
                if (address_xxzx_value) {
                    $("#addresslist").val(address_jy_value + ";" + address_xxzx_value)
                }
                $("#addresslist").val(address_jy_value)
            } else if (address_hq_value) {
                if (address_qq_value) {
                    $("#addresslist").val(address_qq_value + ";" + address_hq_value + ";" + address_xxts_value);
                } else if (address_xxfw_value) {
                    $("#addresslist").val(address_hq_value + ";" + address_xxfw_value);
                } else {
                    $("#addresslist").val(address_hq_value)
                }
            } else if (address_fwq_value) {
                $("#addresslist").val(address_fwq_value)
            }
            //把post请求要携带的数据准备好，并json化,这里应该可以统一json，而不是分开json?
            data = {
                'channelid': JSON.stringify([$('#channelid').val()]),
                'apitype': JSON.stringify([$('#apitype').val()]),
                'terminaltype': JSON.stringify([$('#terminaltype').val()]),
                'userid': JSON.stringify([$('#userid').val()]),
                'password': JSON.stringify([$('#password').val()]),
                'ismd5': JSON.stringify([$("#ismd5").is(':checked')]),
                'addresslist': JSON.stringify([$('#addresslist').val()]),
                'closetimepoint': JSON.stringify([$('#closetimepoint').val()]),
                'loglevel': JSON.stringify([$('#loglevel').val()]),
                'extendinfo': JSON.stringify([$('#extendinfo').val()]),
                'isactive': JSON.stringify([$('#isactive').val()]),
            }
            return data;
        }

        <!--添加，修改-->
        function sub(func) {
            data = func();
            console.log([$('#addresslist').val()]);
            //不输入id，则提交失败
            if (data['channelid'] == '[""]') {
                return;
            }
            $.post("{% url 'Strategy:channel_cud' %}", data, function (r) {
                //成功后刷新页面
                window.location.reload();
            });
        }

        <!-- 新建,修改,模态框取消按钮 -->
        function fad() {
            $('#modal_model_field').modal('hide');
        }

        <!-- .modal-title:模态框，class modele 的 all 字段 -->
        function modify(id) {
            $('.modal-title').text('修改');//在模态框写入标题
            $.get("{% url 'Strategy:channel_cud' %}", {'channelid': id}, function (r) {
                ////////// 实体账户修改页面对行情，交易及消息推送地址的展示选项//////////////
                var address_hq = document.getElementById("hq")
                var address_jy = document.getElementById("jy")
                var address_xxts = document.getElementById("xxts")
                var address_fwq = document.getElementById("fwq")
                var address_xxzx = document.getElementById("xxzx")
                var address_qq = document.getElementById("qq")
                var address_xxfw = document.getElementById("xxfw")

                var channel_tdtype = document.getElementById("tmtype_td")
                var channel_mdtype = document.getElementById("tmtype_md")
                var channel_bttype = document.getElementById("tmtype_bt")

                //拿到外部接口类型的值
                //通过get请求来得值，拿到接口类型，通道类型，然后进行赋值。正确的顺序，应该是先确定是否展示input框，在进行赋值。
                var tmtype = r['apitype'];
                var ttypedisplay = r['terminaltype']
                var termtype = $("select[name=terminaltype]").val(ttypedisplay);
                if (ttypedisplay == "1") {
                    address_hq.style.display = "none";
                    address_jy.style.display = "block";
                } else if (ttypedisplay == "2") {
                    address_hq.style.display = "block";
                    address_jy.style.display = "none";
                } else if (ttypedisplay == "3") {
                    address_jy.style.display = "block";
                    address_hq.style.display = "block";
                } else {
                    address_jy.style.display = "none";
                    address_hq.style.display = "none"
                }
                console.log(termtype, "123")
                console.log(tmtype)
                if (tmtype == 1) { // CTP被选中
                    channel_tdtype.style.display = "block";
                    channel_mdtype.style.display = "block";
                    {#address_hq.style.display = "block";#}
                    {#address_jy.style.display = "block";#}

                } else if (tmtype == 3) { // FEMAS被选中
                    {#$("select[name=terminaltype]").val("")#}
                    channel_tdtype.style.display = "block";
                    channel_mdtype.style.display = "block";


                } else if (tmtype == 4) { //SIM被选中
                    {#$("select[name=terminaltype]").val("")#}
                    channel_tdtype.style.display = "block";
                    channel_mdtype.style.display = "block";
                    channel_bttype.style.display = "block";
                    address_fwq.style.display = "block";
                    {#address_hq.style.display = "none";#}
                    address_jy.style.display = "none";
                } else if (tmtype == 5) { //UFX被选中
                    channel_tdtype.style.display = "block";
                    address_jy.style.display = "block";
                    address_xxzx.style.display = "block";
                    {#address_hq.style.display = "none";#}
                } else if (tmtype == 6) { //CFETS被选中
                    channel_tdtype.style.display = "block";
                    channel_mdtype.style.display = "block";
                    {#address_jy.style.display = "block";#}
                    {#address_hq.style.display = "block";#}
                } else if (tmtype == 8) { //CFETS_xQuant被选中
                    channel_tdtype.style.display = "block";
                    channel_mdtype.style.display = "block";
                    channel_bttype.style.display = "block";
                    address_qq.style.display = "block";
                    address_hq.style.display = "block";
                    address_xxts.style.display = "block";
                    address_jy.style.display = "none";
                } else if (tmtype == 7) { //SIP被选中
                    channel_mdtype.style.display = "block";
                    address_hq.style.display = "block";
                    address_xxfw.style.display = "block";
                } else if (tmtype == 9) { //MDCenter被选中
                    channel_mdtype.style.display = "block";
                    address_hq.style.display = "block";
                    address_xxfw.style.display = "block";
                } else if (tmtype == "a") { //QBMD被选中
                    channel_mdtype.style.display = "block";
                    address_hq.style.display = "block";
                }
                 //赋值，地址需要先切割，其他的直接根据key赋值，因为key就等于id
                if (r) {
                    for (var key in r) {
                        if (key == "addresslist") {
                            arr = r[key].split(";")
                            if (arr.length == 1) {
                                if (address_hq.style.display == "block") {
                                    $("#addresslist").val(arr[0])
                                } else if (address_jy.style.display == "block") {
                                    $("#id_trade").val(arr[0])
                                } else {
                                    $("#id_fwq").val(arr[0])
                                }
                            } else if (arr.length == 2) {
                                if (address_jy.style.display == "block") {
                                    $("#id_trade").val(arr[0]);
                                    $("#id_xxzx").val(arr[1]);
                                } else {
                                    $("#addresslist").val(arr[0]);
                                    $("#id_xxfw").val(arr[1]);
                                }
                            } else {
                                $("#id_qq").val(arr[0]);
                                $("#addresslist").val(arr[1]);
                                $("#id_news").val(arr[2]);
                            }
                        } else {
                            if ($('#' + key)) {
                                $('#' + key).val(r[key]);
                            }
                        }
                    }
                }
                //实体账户修改页面禁止修改字段
                     //这个判断可加可不加，disabled加上后，也可以发请求，值没变化，具体原因待完善？？？？？？
                if ((channelid != null) && (channelid.value != "") &&
                    (apitype != null) && (apitype.value != "") &&
                    (terminaltype != null) && (terminaltype.value != "") &&
                    (userid != null) && (userid.value != "") &&
                    (isactive != null) && (isactive.value != "")) {
                    console.log("12334434")
                    channelid.setAttribute("readonly", "readonly");
                    apitype.setAttribute("disabled", "true"); //下拉框禁止修改，用这两句
                    terminaltype.setAttribute("disabled", "disabled");
                    userid.setAttribute("readonly", "readonly");
                    isactive.setAttribute("disabled", "disabled");
                    {#isactive.setAttribute("onchange", "this.selectedIndex=this.defaultIndex")#}
                }
            });
                     //本来打算通过赋值区分新增还是修改，但是失败了？？？
            $("#ischange").val("1")
            console.log($("#ischange").val())
        };

        <!--创建-->
        function create() {
            $('.modal-title').text('新建');
            $('.opts').val("");//所有值置空
            console.log($("#loglevel").val())
        };

        <!-- 删除的取消 -->
        function quit__() {
            $('#modal_delete').modal('hide');
        }

        <!-- 删除模态框 -->
        function _delete(d) {
            $('#modal_delete').modal('show');
            $('#del').attr('sid', d);
        }

        <!-- 向后台发送post请求，删除数据库 -->
        function del_() {
            d = $('#del').attr('sid');//该值是从js动态渲染删除里面拿到的，先_delete，再del_
            $.post("{% url 'Strategy:channel_cud' %}", {'id': d, 'delete': 1}, function (r) {
                if (r) {
                    window.location.href = "{% url 'Strategy:channel_list' %}";
                } else {
                    $('#myModal').modal('show');
                }
            });//post请求的回调函数，空值show"默认合约不可修改"，y值则删除后跳转。
        };

                    //bootstrap框架渲染table,固定写法
        function InitBootstrapTable(my_url, my_table_id, my_columns, my_filename) {
            $('#' + my_table_id).bootstrapTable('destroy').bootstrapTable({
                url: my_url,
                method: 'get',
                columns: my_columns,
                toolbar: '#toolbar',
                striped: true,
                cache: false,
                pagination: true,
                sortable: true,
                sortOrder: "asc",
                queryParams: function (pageRequest) {
                    return pageRequest;
                },
                sidePagination: "server",
                pageNumber: 1,
                pageSize: 10,
                pageList: [10, 25, 50, 100],
                search: true,      //这里的search是bootstrap内置的查询方法，同时可以发给后台做判断  
                strictSearch: false,
                showColumns: true,
                showRefresh: true,
                minimumCountColumns: 2,
                clickToSelect: true,
                uniqueId: "Symbol",
                showToggle: true,
                cardView: false,
                detailView: false,
                showExport: true,
                buttonsAlign: "right",
                exportDataType: "all",
                exportTypes: ['excel'],
                Icons: 'glyphicon-export',
                exportOptions: {
                    fileName: my_filename,
                },
            })
        };

        <!--my_columns field: 'channelid',从后台取值-->
        my_columns = [
            {
                field: 'channelid',
                title: '通道ID'
            }, {
                field: 'apitype',
                title: '外部接口类型'
            }, {
                field: 'terminaltype',
                title: '通道类型'
            }, {
                field: 'userid',
                title: '交易账号'
            },
            {#{#}
            {#    field: 'password',#}
            {#    title: '登录密码'#}
            {# }, #}
            {
                field: 'addresslist',
                title: '通道地址列表'
            }, {
                field: 'closetimepoint',
                title: '收盘时间',
            }, {
                field: 'loglevel',
                title: '日志级别',
            },
            {#{#}
            {#    field: 'extendinfo',#}
            {#    title: '接口扩展信息',#}
            {# }, #}
            {
                field: 'isactive',
                title: '是否启用',
            }, {
                field: 'option',
                title: '操作',
                formatter: function (value, row, index) {
                    return "<span onclick="modify('" + value + "')" class='btn btn-success btn-xs btn-flat btn_operation' data-toggle='modal' data-target='#modal_model_field'> <i class='fa fa-pencil'></i>修改</span> " + "&nbsp<span onclick="_delete('" + value + "')" type='button' class='btn btn-success btn-xs btn-flat btn_operation'> <i class='fa fa-pencil'></i>删除</span> ";
                }
            },
        ];

        <!-- 列表页渲染数据 -->
        InitBootstrapTable("{% url 'Strategy:channel_list' %}", "InstrumentTable", my_columns, "symbols");

        <!-- 列表页渲染数据 -->
        $('.fixed-table-toolbar').append("&nbsp <span onclick='create()' type='button' class='btn btn-success btn-xs btn-flat btn_operation' data-toggle='modal' data-target='#modal_model_field'> <i class='fa fa-pencil'></i>新建</span>");

        $('.page-list').css('display', 'none');
        $('.pagination-info').css('display', 'none');

        <!-- 查询框的提示信息 -->
        $('.form-control').attr('placeholder', '实体账户查询');


    </script>

    <style>
        .pagination-info {
            display: none
        }

        .page-list {
            display: none
        }

        #fileTable td {
             120px;
            margin-top: 5px
        }

        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
            float: right;
            margin-top: 12px;
            margin-right: 5px
        }

        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }

        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }
    </style>

{% endblock %}

后台 channel.py

from django.shortcuts import render, HttpResponse, redirect
from Strategy.models import *
from Strategy.views.service import my_page
from django.http import JsonResponse
import json
from Django_Admin.enumType import *
from Rbac.utils.encrypt import encryptPassword

#列表页面，先get，然后bootstrap里面渲染的会发post请求，加上数据
def channel_list(request):
    # 当前在第几页
    off = request.GET.get('offset', None)
    # 一页几条数据
    lim = request.GET.get('limit', None)
    # 获取url后拼接的search
    search = request.GET.get('search', None)
    # 判断url后面是否拼接了search，没有，返回页面；有显示搜索条件的值
    if search is None:
        return render(request, 'channel.html')
    else:
        # 按搜索条件获取值
        if search:
            channel_list = Channel.objects.values().filter(channelid__contains=search)
        else:
            channel_list = Channel.objects.values()
        # 把queryset转成列表[{},{}]
        channel_list = list(channel_list)
        for item in channel_list:
            item['option'] = item['channelid']
            # 枚举值，展示
            item['apitype'] = ApiType_choices.get(item['apitype'],None),
            item['terminaltype'] = TerminalType_choices.get(item['terminaltype'],None),
            item['isactive'] = IsActive_choices.get(item['isactive'],None),
            item['loglevel'] = LogLevel_choices.get(item['loglevel'],None),
        result = my_page(channel_list, lim, off)
        return JsonResponse(result, safe=False)


# 添加，修改，删除
def channel_modify(request):
    #点击修改，模态框弹出来然后渲染值。
    if request.method == 'GET':
        # channelid:主键名
        channel_id = request.GET['channelid']
        item = Channel.objects.values().filter(channelid=channel_id).first()
        print('被修改的值：', item)
        if item:
            return JsonResponse(item, safe=False)
    else:
        if request.POST.get('delete', None):
            # 删除
            channelid = request.POST.get('id')
            tdchannel = Customerchannelrel.objects.filter(tdchannelid=channelid).exists()
            mdchannel = Customerchannelrel.objects.filter(mdchannelid=channelid).exists()
            delete_msg = ""
            if tdchannel | mdchannel:  # 如果有一个有，那就说明分账户存在，然后把删除信息填进去
                delete_msg = "请先删除对应的分账号信息！"
            else:
                Channel.objects.filter(channelid=channelid).delete()
                return HttpResponse('y')
            return HttpResponse('')
        else:
            data = request.POST
            print(data)
            if Channel.objects.filter(channelid=json.loads(data['channelid'])[0]).count() >= 1:
                # 修改（加密待修改）
                Channel.objects.filter(channelid=json.loads(data['channelid'])[0]).update(
                    apitype=json.loads(data["apitype"])[0],
                    terminaltype=json.loads(data["terminaltype"])[0],
                    userid=json.loads(data['userid'])[0],
                    password=json.loads(data['password'])[0],
                    addresslist=json.loads(data['addresslist'])[0],
                    closetimepoint=json.loads(data['closetimepoint'])[0],
                    loglevel=json.loads(data['loglevel'])[0],
                    extendinfo=json.loads(data['extendinfo'])[0],
                    isactive=json.loads(data['isactive'])[0],
                )
            else:

                '''
                print(data)
                <QueryDict: {'channelid': ['["1"]'], 'apitype': ['["1"]'], 'terminaltype': ['["1"]'], 'userid': ['["1002"]'], 'password': ['["123"]'], 'addresslist': ['["127.0.0.25"]'], 'closetimepoint': ['["15:00:00"]'], 'loglevel': ['["1"]'], 'extendinfo': ['["很多信息"]'], 'isactive': ['["0"]'], 'sum': ['1']}>
                '''
                print(data)
                # 新增
                if json.loads(data['ismd5'])[0] == False:
                    Channel.objects.create(
                        channelid=json.loads(data['channelid'])[0],
                        apitype=json.loads(data["apitype"])[0],
                        terminaltype=json.loads(data["terminaltype"])[0],
                        userid=json.loads(data['userid'])[0],
                        password=encryptPassword(json.loads(data['password'])[0]),
                        addresslist=json.loads(data['addresslist'])[0],
                        closetimepoint=json.loads(data['closetimepoint'])[0],
                        loglevel=json.loads(data['loglevel'])[0],
                        extendinfo=json.loads(data['extendinfo'])[0],
                        isactive=json.loads(data['isactive'])[0],
                    )
                else:
                    Channel.objects.create(
                        channelid=json.loads(data['channelid'])[0],
                        apitype=json.loads(data["apitype"])[0],
                        terminaltype=json.loads(data["terminaltype"])[0],
                        userid=json.loads(data['userid'])[0],
                        password=json.loads(data['password'])[0],
                        addresslist=json.loads(data['addresslist'])[0],
                        closetimepoint=json.loads(data['closetimepoint'])[0],
                        loglevel=json.loads(data['loglevel'])[0],
                        extendinfo=json.loads(data['extendinfo'])[0],
                        isactive=json.loads(data['isactive'])[0],
                    )

                # c = Channel()
                # c.channelid = str(data['channelid']),
                # c.apitype = data["apitype"],
                # c.terminaltype = data["terminaltype"],
                # c.userid = data['userid'],
                # c.password = data['password'],
                # c.addresslist = data['addresslist'],
                # c.closetimepoint = data['closetimepoint'],
                # c.loglevel = data['loglevel'],
                # c.extendinfo = data['extendinfo'],
                # c.isactive = data['isactive'],
                # c.save()

        return render(request, 'channel.html')