bootstrap table 第一弹:实现模态框弹出编辑

布局代码:

效果图:

bootstrap table 第一弹:实现模态框弹出编辑_第1张图片

bootstrap table 第一弹:实现模态框弹出编辑_第2张图片

 

doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="/static/bootstrap-table/bootstrap-table.css">
    <script src="/static/js/jquery.min.js">script>
    <script src="/static/bootstrap/js/bootstrap.js">script>
    <script src="/static/bootstrap-table/bootstrap-table.js">script>
    <script src="/static/bootstrap-table/locals/bootstrap-table-zh-CN.js">script>
    
    
    <title>数据表title>
    <style>
    style>
head>
<body>
<div id="toolbox">
    <button class="btn" ><span class="glyphicon glyphicon-plus">span> 新增button>
    <button class="btn" id="edit_table_btn"><span class="glyphicon glyphicon-pencil">span> 编辑button>
    <button class="btn"><span class="glyphicon glyphicon-remove">span> 删除button>
div>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modalbutton>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="myModal">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×span>button>
                <h4 class="modal-title" id="myModalLabel">编辑报价单h4>
            div>
            <div class="modal-body">
                <form action="" class="form-horizontal">
                    <div class="form-group">
                        <input type="hidden" class="form-control" disabled="disabled" id="modal_id">
                        <label for="" class="col-sm-2 control-label">报价单号label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" disabled="disabled" id="modal_bj_no">
                        div>
                    div>
                     <div class="form-group">
                        <label for="" class="col-sm-2 control-label">客户label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="modal_cus_name">
                        div>
                    div>
                     <div class="form-group">
                        <label for="" class="col-sm-2 control-label">报价产品label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="modal_bj_prd">
                        div>
                    div>
                    <div class="form-group">
                        <label for="" class="col-sm-2 control-label" >单价label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="modal_up">
                        div>
                    div>
                    <div class="form-group">
                        <label for="" class="col-sm-2 control-label" >模具成本label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="modal_mj_cst">
                        div>
                    div>
                form>
            div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭button>
                <button type="button" class="btn btn-primary" id="sava-edit-btn">保存button>
            div>
        div>
    div>
div>


<table id="mytable">table>
body>
html>

javascript代码:




 

转载于:https://www.cnblogs.com/pyghost/p/10645175.html

你可能感兴趣的:(bootstrap table 第一弹:实现模态框弹出编辑)